web fonts avoiding 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'

Question

I create a style.css file and insert it in the end of html doc.

<html>
<head>
</head>
<body>

<link rel="stylesheet" href="style.css" type = "text/css" />
</body>
</html>

Now I test my webiste in google.

I do not get any error.

But when I insert this code in the top of style.css I get an error.

code:

    @font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/IRANSansWeb_Bold.eot');
    src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
    }

error in google:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

I checked my code. It is because of .woff and .ttf format.

Is these any way to slove it?

I read befor I must change my code to this:

url("data:application/x-font-woff;charset=utf-8;base64,../fonts/woff/IRANSansWeb_Bold.woff") format('woff'),

Is it true? with that change. I do not get any error else But I am not sure that change works on target browser. what do you think?

score 0 · Answer 1 · answered Dec 06 '16 at 22:36

Google Page Insights checks if the above the fold content can be rendered without the need of external resources. Since you are using external fonts, the browser has to load them to render the above the fold content. Try using the sitelocity.com service for generating the critical css part and see if you still have errors.

web fonts avoiding 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'

1 Answers1