CMS Development

PYoganathan
Contributor

Load Custom Fonts

SOLVE

Hello,

What is the ideal approach when linking custom fonts on a website, so that it fonts first before anything else? What I'm noticing now is that the page loads with the fonts but the font changes seconds after it appears.

I have my fonts added on the first line in my global CSS file. However, checking the Network console, the style-fc.css file is loaded last of the stylesheets.

Screen Shot 2022-10-26 at 3.41.11 PM.png

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Load Custom Fonts

SOLVE

@PYoganathan It's the font files themselves that are loading too late, not your CSS. There's two options to resolve this:

1. Add font-display: block to your font CSS. This will block text from displaying until the fonts have loaded.

@font-face {  
  font-family: 'Font'; 
  src: url('fonts/font-file.woff2') format('woff2'); 
  font-weight: normal; 
  font-style: normal;
  font-display: block;
}


2. Add preload calls to your font files, in the <head> of your website before the CSS call, so that they're loaded by time your CSS starts being rendered. With this option text will load onto the page faster, with the desired font, than when using font-display: block.

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

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

1 Reply 1
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Load Custom Fonts

SOLVE

@PYoganathan It's the font files themselves that are loading too late, not your CSS. There's two options to resolve this:

1. Add font-display: block to your font CSS. This will block text from displaying until the fonts have loaded.

@font-face {  
  font-family: 'Font'; 
  src: url('fonts/font-file.woff2') format('woff2'); 
  font-weight: normal; 
  font-style: normal;
  font-display: block;
}


2. Add preload calls to your font files, in the <head> of your website before the CSS call, so that they're loaded by time your CSS starts being rendered. With this option text will load onto the page faster, with the desired font, than when using font-display: block.

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

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.