# FOIT Font Files

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Slow Page Rendering:</strong> When fonts fail to load correctly, it can delay the rendering of textual
    content on the page. Browsers may block the display of text until the font has fully loaded, leading to a noticeable
    delay in content visibility.
  </li>
  <li>
    <strong>Flickering or Flash of Invisible Text (FOIT):</strong> If fallback fonts are used initially and then
    replaced with the intended fonts once they load, it can cause a flickering effect. This can be visually jarring to
    users.
  </li>
  <li>
    <strong>Poor User Experience:</strong> Delayed text rendering can frustrate users, potentially increasing bounce
    rates and reducing the effectiveness of the web content.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Optimize Font Loading:</strong>
    <ul>
      <li>
        Use font-display CSS property: This property allows you to control how web fonts are displayed as they load.
        Options like swap, fallback, optional, and block can be used to balance between rendering speed and visual
        aesthetics.
      </li>
      <li>
        Prioritize Local Fonts: Specify local fonts first in your CSS font-family to reduce the need to fetch fonts over
        the network.
      </li>
      <li>
        Load Only Necessary Font Variants: Include only the required weights and styles to minimize the volume of data
        that needs to be loaded.
      </li>
    </ul>
  </li>
  <li>
    <strong>Reduce Font File Sizes:</strong>
    <ul>
      <li>Compress Fonts: Utilize formats like WOFF2, which offers better compression than older formats.</li>
      <li>
        Subset Fonts: Include only the characters that are actually used on the site to further reduce file sizes.
      </li>
    </ul>
  </li>
  <li>
    <strong>Implement Efficient Caching:</strong>
    <ul>
      <li>Set long cache lifetimes for your font files to reduce repeat downloads for returning visitors.</li>
    </ul>
  </li>
</ul>
[Learn more about font-display.](https://developer.chrome.com/docs/lighthouse/performance/font-display/)

## What is the positive impact

<ul>
  <li>
    <strong>Improved User Experience:</strong> By ensuring text is always visible, users can start reading content
    immediately without waiting for fonts to load.
  </li>
  <li>
    <strong>Enhanced Perceived Performance:</strong> Proper use of font-display can make pages feel faster, as users are
    not left staring at blank spaces.
  </li>
  <li>
    <strong>Better Accessibility:</strong> Immediate text visibility improves accessibility for all users, including
    those with slower internet connections or on mobile devices.
  </li>
</ul>

## How to fetch the data for this report template

You will need to run a crawl for report template to generate report. When report has been generated and you have
crawl id you can fetch data for the report using the following query:


```graphql
query GetReportStatForCrawl(
      $crawlId: ObjectID!
      $reportTemplateCode: String!
      $after: String
     ) {
        getReportStat(
          input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
        ) {
          crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
            nodes {
              opportunityDigest
              element
              title
              auditId
              exampleUrl
              wastedSecsAvg
              urlCount
              wastedSecsSum
              gaPageviewsSum
              savingsScoreSum
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"font_display_failed_items"}
```