Add font optimizations

  • Right now, the Google Fonts theme font Raleway is inserted in the HTML like this:
    <link rel=stylesheet id=shapely-fonts-css href='//fonts.googleapis.com/css?family=Raleway%3A100%2C300%2C400%2C500%2C600%2C700&ver=5.3.2' type=text/css media=all>

    For performance reasons it’d better do add display=swap as a parameter https://addyosmani.com/blog/google-fonts-font-display/

    This theme also uses @font-face in the CSS for Font Awesome and Glyphicons Halflings. Please add the following property to the @font-face block of both fonts in the CSS: font-display: block. ‘Swap’ would not work here, as they’re icons and not normal fonts, so an immediate fallback wouldn’t be possible. Font-display: block would still improve the PageSpeed score

    **This will fix all PageSpeed issues that still occur with this theme**:

    – Eliminate render-blocking resources
    – Ensure text remains visible during webfont load

  • The topic ‘Add font optimizations’ is closed to new replies.