Skip to content

Errors when checking [fonts] #3272

Open
@universewrld

Description

@universewrld

While testing a site with the @gantry 5 template via @google PageSpeed Insights, I found the following errors related to the fonts (Google fonts):

Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more about font-display.
изображение

How to avoid showing invisible text

The font-display API indicates how a font is displayed when used inside a font-face style. The following font-display values will tell the browser to use a system font if the custom font is not ready:

  • swap
  • optional
  • fallback

CSS Example

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Google Fonts Example

Add the &display=swap/&display=optional/&display=fallback parameter to the end of your Google Fonts URL:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Joomla 5.2, Gantry 5.5.19

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions