在 CSS 文件中预加载字体

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?

Answer 1

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

@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.