1

I'm building component for line splitting that accept a string and returns text divided into lines that don't overflow its parent component.

With help of kind people on stackoverflow I have managed to build this example, that works perfectly fine in sandbox or pure react app ( also with custom fonts ). However when I' using the very same component in my Gatsby project text overflows its parent container.

CodeSandBox with code example: https://codesandbox.io/s/line-splitter-5k1xl?file=/src/App.js

I have tried deleting my global styling which resulted in default font being used, then measurement is accurate. My goal is however to use custom fonts and get no overflow like in pure react example.

What i have tried:

  • I have tried applying styles with createGlobalStyle from styled components in gatsbyBrower.js
  • I have tried applying pure css styles in gatsbyBrowser.js and directly in a component
  • I have tried adding inline styles, and define font directly in a component itself

Weird thing to note - on some browsers component measures accurately only after a few refreshes.

I have been searching for solution to this issue for hours now and I have no idea how to fix that, so any help would be greatly appreciated.

Toster
  • 57
  • 1
  • 7

1 Answers1

0

This issue was caused by fonts loaded via Font-Face declaration in CSS. It turns out, that in order to get accurate measurements fonts need to be preloaded. I have tried to add font preload to page head ( via Gatsby Helmet plugin ) like this:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

This in theory should work, but it didn't so i have tried to use "gatsby-plugin-preload-fonts" and it did the trick.

Plugin page: https://www.gatsbyjs.com/plugins/gatsby-plugin-preload-fonts/

Additional video explaining how to use it: https://www.youtube.com/watch?v=i2oquvFdzbg

Extra note:

  • I'm still using font-face declarations in my CSS files like normal, example:

    @font-face { font-family: "Roxborough CF"; src: url("font.ttf") format('truetype'); }

Hope it helps somebody.

Toster
  • 57
  • 1
  • 7