CODEWITHSUNDEEP
cssfontspagespeed-insights
Kanika Malhotra
Kanika Malhotra

Reputation: 11

Ensure text remains visible during webfont load not getting resolved in Google pagespeed insights report

Can someone help me out here,below is my code where should I insert swap to resolve webfont issue in google pagespeed insights report, as i am not able to replace display:inline-block with display:swap.

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

Upvotes: 1

Views: 450

Answers (2)

Grégoire
Grégoire

Reputation: 26

You should also use Woff2 and woff, more than 40% lighter. EOT is not good solution.

I wrote an article about it (in French) to fully optimize the fonts : Optimiser les fonts

Upvotes: 0

Brian
Brian

Reputation: 11

You need to add font-display to the @face-font declaration.

So your code would be:

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

See for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#Examples

Upvotes: 1

Related Questions