Slow Loading Fonts

Technical Q&A
,
1

Hi all,

My site: crossingtz.uk

I have added some custom fonts via a custom font picker on the theme settings.

My issue is, the fonts take a second to load and while loading, the default font shows. I don’t like how this looks, could anyone lend a hand?

Thanks

Connor

4

You’re still loading default theme font Inter.

Go to Theme Settings-> Typography and select one of the “System Fonts”, like Helvetica instead.
This will lessen the amount to download and make your fonts load a bit faster.

Another suggestion is to move the Orbitron @font-face clauses from the assets/base.css into <head> in layouts/theme.liquid
(make sure they are inside <style> … </style>)

You may also create preloads for your fonts like in

1 Like
5

Thanks so much, your 2nd suggestion worked!

6

Hi,
When using custom fonts, a slight delay in loading can cause a temporary fallback font to appear.
This can be improved with a few simple adjustments.

  1. Add font-display to your font :
    This controls how the font behaves while loading:
    @font-face {
    font-family: ‘Orbitron’, system-ui, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif;
    src: url(‘your-font.woff2’) format(‘woff2’);
    font-display: swap;
    }
  2. Preload the font: This helps the browser load it earlier:
    < link rel=“preload” href=“{{ ‘your-font.woff2’ | asset_url }}” as=“font” type=“font/woff2” crossorigin>
  3. Use a similar fallback font:
    Choose a fallback font that’s visually close, so the transition is less noticeable.
    These changes help reduce the font loading delay and make the transition much smoother.
    Hope this helps !