Preloading fonts in CSS File

Question

i have a font-awesome CSS-Fille which i load in the footer of my website. In the CSS File the fonts are loaded kike this:

font-display:swap;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) 
format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa- 
brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf)......

not i look for an solution to preload these fonts. Is there an easy way to do that?

score 1 · Accepted Answer · answered Oct 14 '20 at 13:25

Not sure if thats what you mean, but you can define a font-face in a seperate css file, e.g.:

@font-face {
  font-family: faBrands;
  font-weight: 400;
  src: url('/webfonts/fa-brands-400.eot');
}

@font-face {
  font-family: faBrands;
  font-weight: 400;
  src: url('/webfonts/fa-brands-500.eot');
}

Assuming the folder webfonts is under public, you can then write in a css file:

font-family: faBrands;

Just make sure to import the font face css file first.

Preloading fonts in CSS File

1 Answers1