Robert Granlund

<div>
<div class="content wysiwyg-content fr-view">
<strong>*** This question is specifically about how to Preload Fonts that are included @font-face NOT how to optimize for page speed!!!</strong><br><br><span style=" text-align: left;">I have a site that is using the Atelier Theme. &nbsp;In the main.css it loads a custom font with @font-face in the CSS file. &nbsp;In Google Page speed I get a pretty big lag of 12000ms to load the font. &nbsp;How do I preload a font that uses @font-face. &nbsp;I have place the following in the head but it makes no difference.</span><br style=" text-align: left;"><span style=" text-align: left;">&nbsp;</span><br style=" text-align: left;"><span style=" text-align: left;">&lt;link rel="preload" as="font" href="&lt;?php echo get_template_directory(); ?&gt;/css/font/si-atelier.woff?-7oeevn" type="font/woff" crossorigin="anonymous"&gt;</span><br style=" text-align: left;"><span style=" text-align: left;">&nbsp;&lt;link rel="preload" as="font" href="&lt;?php echo get_template_directory(); ?&gt;/css/font/fa-brands-400.woff2" type="font/woff2" crossorigin="anonymous"&gt;</span><br style=" text-align: left;"><br style=" text-align: left;"><span style=" text-align: left;">This is what Google Pagespedd reports:</span><br style=" text-align: left;"><br style=" text-align: left;"><span style=" text-align: left;">Preload key requests &nbsp;11.4 s</span><div style=" text-align: start;">Consider using `&lt;link rel=preload&gt;` to prioritize fetching resources that are currently requested later in page load.<table style=" width: calc(100% - var(--audit-description-padding-left));"><tbody><tr><td style=" text-align: left;"><br></td><td style=" text-align: right;"><br></td></tr></tbody></table></div>
</div>
</div>



*** This question is specifically about how to Preload Fonts that are included @font-face NOT how to optimize for page speed!!!
I have a site that is using the Atelier Theme.  In the main.css it loads a custom font with @font-face in the CSS file.  In Google Page speed I get a pretty big lag of 12000ms to load the font.  How do I preload a font that uses @font-face.  I have place the following in the head but it makes no difference.
 
<link rel="preload" as="font" href="<?php echo get_template_directory(); ?>/css/font/si-atelier.woff?-7oeevn" type="font/woff" crossorigin="anonymous">
 <link rel="preload" as="font" href="<?php echo get_template_directory(); ?>/css/font/fa-brands-400.woff2" type="font/woff2" crossorigin="anonymous">
This is what Google Pagespedd reports:
Preload key requests  11.4 s
Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load.

How To Preload  Fonts That are included @font-face within Theme CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

A font is a particular size, weight and style of a typeface. Each font is a matched set of type, one piece (called a "sort") for each glyph, and a typeface consists of a range of fonts that share an overall design. With the advent of digital typography, font is frequently synonymous with typeface, although the two terms do not necessarily mean the same thing. In particular, the use of "vector" or "outline" fonts means that different sizes of a typeface can be dynamically generated from one design. Each style may still be in a separate "font file" -- for instance, the typeface "Futura" may include the fonts "Futura roman", "Futura italic", "Futura bold" and "Futura extended" —- but the term "font" might be applied either to one of these alone or to the whole typeface.