I have a generic css file with all fonts the website is using (local).
Inside i have for example :
#font-face {
font-family: "LemonMilk";
src: url("../fonts/LemonMilk.otf");
}
.....
.LemonMilk{
font-family: "LemonMilk" ;
font-size: 4vh;
}
I have many many of them, but some pages need only few of them, but still i load the whole file for every page :
<head>
....
<link rel="stylesheet" href="../css/style.css"/>
Problem:
Most of my pages will delay loading them and show system fonts for a second or 2.
Tried:
<link rel="preload" as="font" href="/style/some.otf" type="font/otf" crossorigin="anonymous">
which provide a warning message that they where loaded but never used within a few seconds of page loading. But i do use them right away.
Questions:
How to reduce delay?
If i include a css with all fonts, will he load also the ones i dont use?
why preload didn't work ?
when using #font-face in CSS, it is down to browser, how it behaves.
It's good to use external CSS sheet for declaring fonts.
If this doesn't help, you could try making different CSS files with fonts for different subpages. As you mentioned, you don't use all fonts on all subpages, so it may reduce the filesize and consequently load faster.
Once I was working on a project with a lot of fonts and I had similar problem. The best solution then was to base64 encode all of the fonts I used. So by that approach, all of the fonts had to be loaded before HTML was parsed and displayed. Font squirrel's webfont generator found here: https://www.fontsquirrel.com/tools/webfont-generator can be really helpful tool. If you will use it you should click "Expert" and "base64 encode".
Also, for testing and seeing how your load times improve, you can check out Fontloader here: https://github.com/smnh/FontLoader . It detects when fonts of the specified font-families loaded and rendered by the browser so you can see which step is taking the most time.
Related
I'm creating personal blog with next.js.
Currently i use google fonts to provide fonts for my blog. Everything works fine except initial content shift on load.
When I load my web it will shift when new font loads (not all fonts have same spacing, sizes, etc...). So my question is how to prevent this content shift?
I have seen many suggestions to add loading screen until everything loads, but I think that the best solution would be just to bundle everything to the html itself. NextJs automatically inlines styles for me with <style/> tags and next-images will inline small images with base64. So how do I automatically inline my fonts (I dont want to always change tons of #font-face declaration when I decide to change font)?
Currently i use:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
I would like NextJS to automatically convert it to something like this:
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
You can use this amazing project to get any google font with base64 inlined src.
embedded-google-fonts
just put your google font link here: https://amio.github.io/embedded-google-fonts/
for example, for Barlow font: https://fonts.googleapis.com/css2?family=Barlow:wght#400;600;800&display=swap
then you can copy the result and create a <your-font>.css file in the project.
I am trying to use Roboto for a text-based logo and have the necessary code to load the font in <head>. While the site is loading, you can briefly see the logo in an ugly default font before becoming properly formatted in the web font. The logo literally grows bigger and then smaller. Is this type of problem indicative of poor code implementation or is something else the problem?
I am happy to upload the relevant code portion if the question cannot be answered generally.
One option would be to tell the browser to preload your fonts.
Here is an example:
<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">
If you’re using a CDN like Google Fonts (Roboto), be sure that the font files you’re preloading match the ones in the CSS, or you could end up downloading two versions of the same font.
Hope this helps!
My HTML website will use the font Open Sans, and I'm wondering what is the best way to load the font while keeping the website really fast?
Using google fonts in the html: <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
Using google fonts in the CSS: #import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
Downloading the font from the serveur in the css:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
Something else?
Thanks!
2020 Way of Google Font loading.
If you want copy and paste solution, go ahead.
<!-- [STEP #1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- [STEP #2] -->
<link rel="preload" as="style" href="FontUrl&display=swap" />
<!-- [STEP #3] -->
<link rel="stylesheet" href="FontUrl&display=swap" media="print" onload="this.media='all'" />
<!-- [STEP #4] -->
<noscript>
<link rel="stylesheet" href="$CSS&display=swap" />
</noscript>
If you wanna know what is happening, here's the steps with a small explanation.
Preconnect to the google font origin. It help pages load faster by
telling the browser what assets it'll need in the future.
Preload font files. This ensures they are available earlier and are
less likely to block the page's render, improving performance.
Remember "display=swap" is important to score on google pagespeed
insight.
Apply css on load function. Ask the browser to load the CSS
asynchronously with the print context but as soon as the CSS file is
loaded then apply it to the all context.
Fallback if Javascript is disabled in the browser.
It really depends on how fast your own server is though. If your server is quite fast, of course I would prefer 3rd method:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
However, if your server is really quite slow, then the 1st or 2nd method would be faster, as in was my case.
One very effective way of checking which is faster is to go to this website called pingdom. From there, you enter your webpage URL and then it would show how much time it took for each file to download.
You can see all your font files there as well, and how long it took for each one to download. Try using all 3 different method and find out which is the fastest through Pingdom.
The fastest way to do it is not to do it at all ;)
In your case the best options is to load it from google cdn and hoping your users already have it cashed from previous visit of a page using it.
I'd expect the fastest to be loading it from your own server using #font-face because there are less DNS lookups, and your server is probably under less load than Google's.
If you want it to load fastest you can inline the #font-face attribute to the head of your document, however I would recommend leaving it in the stylesheet.
Although, if you're willing to use some javascript, this looks like the fastest way I can find.
Well all the three ways are fine but when it comes to page load the third way will be perfect. As you will keep everything on local and no need to make multiple calls.
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
This is perfect because in first method obviously you are calling fonts from different server it will increase load time and in second method multiple calls will happen so the third way would be perfect.
Has anyone tried successfully to reduce loading times of Typekit by using preload or prefetch? i.e.
<link rel='preload' href='...' as='font'>
<!-- and/or -->
<link rel='prefetch' href='...'>
Is it a practical or possible in the current Typekit loading setup?
You could try preloading Typekit's script:
<link rel="preload" href="https://use.typekit.net/[YOUR_KIT_ID].js" as="script">
I've tested this and it does seem to work. The 'loading order' of waterfall changes — the Typekit script moved up to tie second with my main (deferred) javascript file. As for performance, I'm not seeing much improvement — if any at all.
As of today, link rel='preload' is not implemented by any browser.
I have tried using link rel='prefetch', and Chrome did prefetch that font, however, it ignored the prefetched font and downloaded it again when it needed it.
i'm working on a website and currently using the #font-face tehnique (this + this) to load the fonts.
I noticed that some of the special characters are not loading properly -> ŠĐŽČĆ šđžčć.
This is, those characters exist in the font itself.
So, i made a test...
I loaded up a test page with #font-face fonts and cufon fonts...
The result is below ->
and of course, here is the code ->
<html>
<head>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
<style type="text/css">
#font-face {
font-family: 'ReprobateCROLASTRegular';
src: url('reprob_cro_last_last-webfont.eot');
src: local('ReprobateCROLASTRegular'),
url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
url('reprob_cro_last_last-webfont.woff') format('woff'),
url('reprob_cro_last_last-webfont.ttf') format('truetype'),
url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h2{
font-family:ReprobateCROLASTRegular;
}
</style>
</head>
<body>
<h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1>
<br/><br/>
<h2>--> #FONT-FACE --> šđžčć ŠĐŽČĆ</h2>
</body>
</html>
So far i've tryed switching the encoding from utf8, widnwos1250, and nothing seems to work with the #font-face tehnique...
So, i have two questions... Does anybody know what's going on here? And, if i switch to using cufon insted of #font-face - how much would that slow down the page loading? (concidering cufon uses JS to load the fonts)
Thank you for your time!
I myself had a lot of issues with #font-face recently while I was working on a web-font intensive web site and it turned out that the online web-font generating tools themselves were the guilty ones. They simply generated bad .woff / .ttf /.svg /.otf files which resulted in a lot of issues for which it was very hard to pinpoint the source of the problem.
In my experience the only online web-font generating service that provides 100% valid - issue free web-fonts is Font Squirrel. It also allows a lot of useful stuff such as font subsetting which might also be the problem in your case (i.e. you didn't specify to include additional characters in your generated web-fonts - Serbian / Croatian is part of Latin Extended B if I am not mistaking).
Have you tried it with http://fontface.codeandmore.com/ an alternative #font-face generator?.
The H2 has the wrong font definition: the single quotes are missing.
It is now:
font-family:ReprobateCROLASTRegular;
Should be:
font-family:'ReprobateCROLASTRegular';
You seem to have worked out the font issue; re: load times, my experience is that both font-face and cufon will potentially be slow enough to have a brief flash of default text. It depends on your host and the user's connection of course; but both methods require a relatively heavy download (either the JS or the font).
So, all else being equal IMHO you may as well use font-face; at least browsers are getting better at caching the font file so after the initial page load you can get faster rendering. With cufon it always has to load and execute the JS so you'll never get rid of that part of the load time.
You implementation is good.
But when you used font-face. The font that you used. Must have all the characters that you want use. The .ttf or what ever must have all the characters and special characters when you will used it.
When you used Cufon. The Cufon generator make a lot of extra font letters for you. In the font generator of Cufon. You can select a lot of extra's for the font.
Do you understand it??