font-family 404

[elisei]

Hello, Thank you very much this is being really useful!

Well, I'm using another font-family pattern, and critical.css is generating the wrong address, returning 404 which is really bad, any tips on how to solve it?

[volodymyr-lisniak]

Hello, @elisei could you show how you include your font or how you declare it (less or xml)? And what the result you see on the console?

[elisei]

@bobmotor

Sure, follow

[volodymyr-lisniak]

@elisei The problem is more extensive than the gulp critical task.

Gulp Penthouse plugin is doing right. It takes styles-m.css and styles-l.css and create critical.css based on the styles inside. And the path for the font is ../fonts/Oswald/Oswald-Regular.ttf ('@{baseDir}fonts/Oswald/Oswald-Regular').

But the problem is the relative path isn't the same for the root of the site (where is situated the critical.css) and the pub/static folder (where is situated styles-m.css and styles-l.css).

http://dev.localhost/fonts/Oswald/Oswald-Regular.ttf != http://dev.localhost/pub/static/version1234567890/frontend/Pixelmade/Academy/pt_BR/fonts/Oswald/Oswald-Regular.ttf

To solve this issue, you can include your font from external resources or remove font-face declaration from critical styles after its compilation.

If you have some ideas to automatize this process - you are welcome.

Likewise, if we create critical.css for the Luma theme, we also will have font-face declarations inside. And I guess it was removed after critical compilation from here. But we can find a similar issue with a relative path. The rule .load.indicator:before{background:transparent url(../images/loader-2.gif) no-repeat 50% 50%; also will get a 404 error if we will have these classes on the page.

[elisei]

@bobmotor I was not able to automate the process, but I got a very viable solution, by changing the sources to the Magento_Theme folder, and of course changing the declarations to path.

[volodymyr-lisniak]

@elisei I already have a solution. Wait for the updates soon.

[volodymyr-lisniak]

@elisei Now gulp critical --<themeName> creates concatenated pub/static/<Area>/<Package>/<themeName>/<locale>/web/css/critical.css from styles-m.css and styles-l.css with replaced paths to the static resources and then generates critical.css for your theme. For example, changed path looks like this pub/static/versionXXXXXXXXXX/frontend/<Package>/<Theme>/<locale>/ (../ - old version). For the correct critical path creation, you should have pub/static/deployed_version.txt (it generates after php bin/magento s:s:d).

In production mode no need to push critical.css to the repository, it should be created after php bin/magento s:s:d.

Also, [data-role=main-css-loader] selector is excluded from the critical.css by default to show loader before the main styles will be included on the page.

[elisei]

@bobmotor , I still had a little problem when the folder is a secondary directory (ex: checkout / cart) thats why I implemented the change and pushed it for you. Once again thank you very much for your support, I hardly know you but I already love you! <3

[volodymyr-lisniak]

HI, @elisei I would be grateful if you test this solution #17 or leave a comment about this

[mattkrupnik]

BTW. why we need deployed_version.txt setup:static-content:deploy isn't required in develop mode. when I run any gulp command (exec or clean), I get error that deployed_version.txt is missing. I never do setup:static-content:deploy in developer mode, and after this error, I must create deployed_version.txt.

[volodymyr-lisniak]

@mattkrupnik Now you can update to the version v1.4.1

Added exception to prevent crashing when pub/static/deployed_version.txt is not exist.

It also would be great if you will remove all gulp files from your Magento project before composer update (see new readme.md)

---

I never do setup:static-content:deploy in developer mode, and after this error, I must create deployed_version.txt.

If you want to create critical CSS with the right paths to the static resources, you should compile it on the server in production mode. And for that reason, you need to use static:content:deploy and to get the version from deployed_version.txt.

I shall be pleased to answer any questions that you may have about critical CSS and about how you can create it in development mode as well as in production mode.

[congson95dev]

If some one still got the issue, you can follow this quick fix:

I've solutions for default fonts of magento and custom fonts, you can choose one of them to apply to your project.

This solution work for magento default fonts. Run these 2 commands, or you can create a .sh file and run by using this command "sh your-file.sh".

perl -pi.back -e 's|@font-face.*?}||g' app/design/frontend/Vendor/Theme/web/css/critical_source/critical.css
perl -pi.back -e 's|@font||g' app/design/frontend/Vendor/Theme/web/css/critical_source/critical.css

This will remove font-face and font from your critical.css file. Example in my project:

This solution work for custom fonts Find your fonts on google api and add it to your project by layout. Here's how you do it: Create app/design/frontend/Vendor/Theme/Magento_Theme/layout/default_head_blocks.xml Then paste this content to that file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <head>
        <link src="your_custom_font_link" rel="stylesheet" src_type="url" />
    </head>
</page>

Example:

Remember to run setup command after all of this. php bin/magento setup:upgrade && php bin/magento setup:di:compile && php bin/magento setup:static-content:deploy en_US -f && php bin/magento c:f

Hope it's help.