[Support request] preload fonts

[Luis]

Hi guys,
I was looking at a way to load fonts faster and comparing GP (here)

<link rel=’dns-prefetch’ href=’//fonts.googleapis.com’ />
<link href=’https://fonts.gstatic.com&#8217; crossorigin rel=’preconnect’ />
<link rel=”alternate” type=”application/rss+xml” title=”WP Full Speed.com » Feed” href=”https://wpfullspeed.com/feed/&#8221; />
<link rel=”alternate” type=”application/rss+xml” title=”WP Full Speed.com » Comments Feed” href=”https://wpfullspeed.com/comments/feed/&#8221; />
<link rel=’stylesheet’ id=’generate-fonts-css’ href=’//fonts.googleapis.com/css?family=Source+Sans+Pro:regular,600|Source+Serif+Pro:regular’ media=’all’ />

with this script

<!– Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com –>
<link rel=”dns-prefetch” href=”https://fonts.gstatic.com”&gt;
<link rel=”preconnect” href=”https://fonts.gstatic.com&#8221; crossorigin=”anonymous”>
<link rel=”preload” href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,600|Source+Serif+Pro:regular” as=”fetch” crossorigin=”anonymous”>
<script type=”text/javascript”>
!function(e,n,t){“use strict”;var o=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,600|Source+Serif+Pro:regular”,r=”__3perf_googleFonts_7734a”;function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement(“link”);e.href=o,e.rel=”stylesheet”,c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement(“style”);t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty(“display”)?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,”@font-face{font-display:swap;”)}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!– End of code snippet for Google Fonts –>

Are we missing preload on GP?

PLease advice

Regards
Luis

[Elvin]

Hi Luis,

Generally, this part is enough:

<link rel="preload" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,600|Source+Serif+Pro:regular" as="fetch" crossorigin="anonymous">

But if you’re unsure, it’s best to just let the optimization plugin you use do it for you. 🙂

[Author]

Posts