menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Minimizing (or eliminating) FOUT

February 23, 2020 at 5:38pm

Minimizing (or eliminating) FOUT

February 23, 2020 at 5:38pm
I've created a couple Gatsby projects, and this is the first one where I'm experiencing FOUT. I'm wondering if I've done all that I can do to minimize/remove the jank.
For font importing and styling I'm using styled-components createGlobalStyle imported into gatsby-browser.js. Two fonts self-hosted from typefaces.js which are required in the layout component. In the Chrome Dev Tools network tab fonts are requested at about 150ms and load immediately, but that flash at 150ms isn't my favorite.
Is this normal? Like I said, I haven't experienced this with any of my other Gatsby projects.
//gatsby-config.js
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
plugins: [
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
`gatsby-plugin-preload-fonts`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`,
},
},
{
resolve: `gatsby-source-prismic`,
options: {
repositoryName: `custom-solutions-inc`,
accessToken: `${process.env.API_KEY}`,
linkResolver: ({ node, key, value }) => post => `/${post.uid}`,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Custom Solutions Inc.`,
short_name: `CSI`,
start_url: `/`,
background_color: `#eCe2d0`,
theme_color: `#eCe2d0`,
display: `standalone`,
},
},
`gatsby-plugin-offline`,
],
}
//package.json
"dependencies": {
"babel-plugin-styled-components": "^1.10.7",
"gatsby": "^2.18.12",
"gatsby-background-image": "^0.9.13",
"gatsby-image": "^2.2.39",
"gatsby-plugin-manifest": "^2.2.41",
"gatsby-plugin-offline": "^3.0.35",
"gatsby-plugin-preload-fonts": "^1.0.27",
"gatsby-plugin-sharp": "^2.4.0",
"gatsby-plugin-styled-components": "^3.1.19",
"gatsby-source-filesystem": "^2.1.46",
"gatsby-source-prismic": "^2.3.0-alpha.3",
"gatsby-transformer-sharp": "^2.3.13",
"normalize.css": "^8.0.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-icons": "^3.8.0",
"react-responsive": "^8.0.3",
"styled-components": "^5.0.1",
"typeface-gelasio": "^1.1.3",
"typeface-roboto": "0.0.75"
}
//Layout.js
import React from 'react'
import { Header } from './Header'
import { MobileMenu } from './MobileMenu'
require('typeface-roboto')
require('typeface-gelasio')
...

February 23, 2020 at 5:53pm
what's "FOUT"?
  • reply
  • like
FOUT stands for Flash Of Unstyled Text. It refers to when text using a custom font-face shows with a regular font and then blinks and switch to the custom one when the font is downloaded and the browser can correctly render it.
like-fill
2
  • reply
  • like

February 24, 2020 at 1:44pm
not sure how to do with gatsby, but perhaps you can preload it with a <link rel="preload" ... /> ?
  • reply
  • like

February 27, 2020 at 1:07am
What ended up solving this for me was gatsby-plugin-preload-fonts. I had already had this installed and it was preloading one of my two fonts, but not the other. I noticed that there was no second <link rel="preload" ... /> with the second font in the head. When I ran the script provided by the plugin again it picked up the other font and now there is no FOUT.
  • reply
  • like