Should I load fonts first in a document?

HTML & CSS
1

Hi there,

I am including some Adobe fonts and wondered if I should load them before or after my main style sheets?

I am also using Boootstrap.

Is there an order I should be doing this?

Thanks

2

Well it depends how you are loading the fonts. You can load them through <link> tags or by declaring a font-face or font-family in a stylesheet. If you are referencing them through the link tag, make sure to use the rel="preload" attribute and should probably be loaded as soon as possible before rendering. Otherwise you might possibly see text rendered in one font and suddenly the entire page gets re-rendered in the new font.

If you are using stylesheets, you will want to respect the cascade of rules. So if you need to override bootstrap, your definitions should be after bootstrap styles are loaded. Here is a nice article that talks about font loading that may answer many more questions…

I hope you find this useful. :slight_smile:

3 Likes
3

Hi,

Thanks for the reply, that is very useful. I have added the rel="preload" to the links :slight_smile:

4

Font display gives us a little more control over these behaviors if required. :slight_smile:

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.