1

I upgraded Gatsby from v2.x.x to 3, and like the documentation suggested, upgraded all the gatsby plugins including gatsby-plugin-styled-components as well as styled-components.

I understand that I've upgraded major versions, which means there will be breaking changes, but I had to upgrade Gatsby as it breaks on an M1 macbook.

Problem now is, my website https://nikhilvijayan.com now doesn't load the google fonts. For eg: the first load works OK (i.e. google fonts load OK), but then clicking on any of the links in the Nav (for eg: https://nikhilvijayan.com/projects) loads the page without any google fonts - however, refreshing the page will then load in the google fonts.

I haven't done much front-end recently, and was wondering if someone could point me in the right direction to debug this issue please? Is there some kind of a race condition happening here?

Luckily, this is happening when I run the app locally as well, so at least this is consistent behaviour.

Github repo: https://github.com/nkhil/portfolio

An example of styled-components use: https://github.com/nkhil/portfolio/blob/main/src/components/Hero.js#L47

nkhil
  • 1,452
  • 1
  • 18
  • 37
  • Can you share your Google Fonts implementation at least? – Ferran Buireu Oct 16 '21 at 11:14
  • 1
    Sorry I should have included this in the post! Here's the repo: https://github.com/nkhil/portfolio. Here's an example of my declaring a font: https://github.com/nkhil/portfolio/blob/main/src/components/Hero.js#L47 . Thanks @FerranBuireu – nkhil Oct 16 '21 at 11:18

2 Answers2

1

I think your fonts are loaded on the initial rendering properly but get lost in each because the @font-face support is quite odd (see GitHub issue) in styled-components. There are a bunch of articles that recommend using a font.css file.

My proposed solution is to add the fonts using a font.css file, where you define your @font-face, imported directly in the Layout component (because it's shared across your templates), or using a Helmet component to load the fonts but only in the Layout, you don't need to use it in all the components which will lead into a decrease of performance.

You can even combine both approaches with:

<Helmet>
  <link rel="stylesheet" type="text/css" href="/fonts.css" />
</Helmet>
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Your solution didn't exactly work for me, but helped me still. I ended up using `gatsby-plugin-google-fonts` to pre-load my selected font, which seems to predictably work. Really appreciate your comment though as it helped point me in the right direction. Thank you! For anyone reading this with my same issue, this is the plugin I ended up using: https://www.gatsbyjs.com/plugins/gatsby-plugin-google-fonts/ I also tried `gatsby-plugin-preload-fonts` but didn't work. – nkhil Oct 16 '21 at 16:59
  • Here is also another SO question that helped me: https://stackoverflow.com/questions/47488440/how-do-i-add-google-fonts-to-a-gatsby-site – nkhil Oct 16 '21 at 17:01
  • 1
    Yes that was my second option, I always end using self-hosted or one of the load plugins but seeing your code source I thought it wasn't an option for you. I'm glad it helped anyway:) – Ferran Buireu Oct 16 '21 at 17:40
0

This might not be the best solution but you can try to import the google fonts script in every page inside the Helmet component. Alternatively, I would download the fonts and serve them in the global CSS styled components.

 <Helmet>
    <meta charSet="utf-8" />
    <title>Nikhil Vijayan - Blog</title>
    <meta name="description" content="Blog posts written by 
    Nikhil 
    Vijayan" />
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" 
    crossorigin="true"/>
    <link href="https://fonts.googleapis.com/css2? 
     family=Roboto:wght@300&display=swap" rel="stylesheet"/>
  </Helmet>
ASG
  • 513
  • 3
  • 10
  • Thanks, I like the idea of serving the fonts locally instead of loading them in from google fonts. Thanks also for including a code block! – nkhil Oct 16 '21 at 11:39
  • I think it's the best option, is more time consuming but you'll achieve much better loading times. You're welcome! – ASG Oct 16 '21 at 11:40
  • Sorry this answer didn't end up helping me in the end – nkhil Oct 16 '21 at 17:02