If Google font is on a page that has display: none;, how do you load the Google font before the page is viewable?
Is this even able to be done?
I guess maybe, like how you would it with images,
Is there such a thing as lazy loading Google fonts or something like that?
Can an example be made of it working like how I described?
Having google font loaded in the browser before display none is removed from the page where the font is.
Do you notice any difference?
https://jsfiddle.net/h6wzqerL/
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Karla:wght@700&display=swap" rel="preload" as="style" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Karla:wght@700&display=swap" rel="stylesheet">
<link rel="preload" href="https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2" crossorigin as="font" type="font/woff2" />
<link rel="preload" href="https://fonts.gstatic.com/s/karla/v31/qkBIXvYC6trAT55ZBi1ueQVIjQTDH52aE0lK.woff2" crossorigin as="font" type="font/woff2" />
<!-- Core theme CSS -->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
https://jsfiddle.net/c68d4zLo/
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Karla:wght@700&display=swap"
rel="stylesheet">
<!-- Core theme CSS -->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
It’s not really my area but If you look in your network panel of your devtools you should see that the font on the second one of them only loads when you click the button.
okay, that is how you test it.
I followed this, so it is working how it is supposed then, I guess.
In this example here: https://jsfiddle.net/0qdyw46a/1/
How come, after clicking each close button, the font is reloaded each time?
Is there a way to fix that?
Shouldn’t that be not occurring?
And maybe I am wrong about that and this is normal.?
Initial:
After clicking 1st exit button
After clicking 2nd exit button
The time column says 0ms for all those so I’m not sure what’s going on there.
I don’t think they’re your fonts anyway as you are not using Roboto that I can see? It’s either your players or the fiddle code. You destroy the players each time (I’ve no idea why) so I guess the fonts for them get reloaded each time you have a player opened.
The network panel is a bit complex so maybe you should watch a couple of tutorials on how to use it best if you are going to go in depth about loading times and resources etc.
When this is removed: https://jsfiddle.net/b139ej87/1/
/*const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);*/
Only these appear:
And they don’t double up each time the exit button is clicked.
It appears empty when these are removed:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Karla:wght@700&display=swap" rel="preload" as="style" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Karla:wght@700&display=swap" rel="stylesheet">
<link rel="preload" href="https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2" crossorigin as="font" type="font/woff2" />
<link rel="preload" href="https://fonts.gstatic.com/s/karla/v31/qkBIXvYC6trAT55ZBi1ueQVIjQTDH52aE0lK.woff2" crossorigin as="font" type="font/woff2" />
Here is what I get via git hub when that is removed:
And it stays like that after it is removed.
I think I know.
The one’s with the K, Roboto must be YouTube font.
This is my answer:
https://www.manypixels.co/blog/brand-design/best-youtube-fonts
As mentioned before, Roboto is the default font for the YouTube platform; they even use it for closed captions. Adhering to this, many YouTubers use Roboto font for their too.
Everything is fine then.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.