Why is the WebFont downloaded twice then using preload and font-face? - css

I want to prioritze the download of the webfont and tried this, according to https://leerob.io/blog/fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" />
<style type="text/css">
#font-face {
font-family: Inter;
font-display: optional;
src: url(https://leerob.io/fonts/inter-var-latin.woff2) format('woff2');
}
body {
font-size: 300%;
font-family: Inter;
}
</style>
</head>
<body>
lorem ipsum.
</body>
</html>
The problem is that the browser downloads the font twice. codepen is here: https://codepen.io/snuup/pen/poPBBLg if you refresh it, and filter the downloads to fonts (since codepen has so many files itself) you see the 2 downloads.
How can I preload the font and avoid 2 downloads?

Weirdly enough, it turns out you need to add the crossorigin property to the link, even when it's on the same site. It doesn't make sense to me either, but it works.
So your tag should be
<link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin />

Related

Preload typekit font css

Does anyone know how to preload typekit font? Right now my computed font is Ariel and I get the error:
The resource https://use.typekit.net/dwg7avv.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The font works if I do a normal import.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
body {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 100;
}
</style>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>
</head>
<body>
This is my font.
</body>
</html>
Short answer, you have to load the stylesheet at the end of your head element.
For explanation why, you can check out the documentation from mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
So with your example it should be like:
<head>
<link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style">
<link rel="preload" href="main.js" as="script">
...
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css">
</head>
I've just faced exactly the same problem, and I did solve with this structure
<!-- https://use.typekit.net & https://p.typekit.net is the font file origin (Lighthouse required both links from Adobe) -->
<!-- It may not have the same origin as the CSS file (https://use.typekit.net/pgd3inh.css) -->
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<link rel="preconnect" href="https://p.typekit.net" crossorigin />
<!-- We use the full link to the CSS file in the rest of the tags -->
<link rel="preload" as="style" href="https://use.typekit.net/dwg7avv.css" />
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" />
</noscript>
This article helps me to solve it and know why
It's a bug, I had the same problem and i'm now giving up:
https://bugs.chromium.org/p/chromium/issues/detail?id=593267
Funny is, the only reason I tried to use preload, was of the chrome lighthouse test that recommendet it to me.
And here the picture of it kinda preload but not actualy working!

Google fonts weight not properly displayed

If I run the code below, the Josefine Sans font weight 400 looks bolder than weight 600. Can anyone explain why this is happening?
body {
font-family: 'Josefin Sans', sans-serif;
font-size: 24px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600" rel="stylesheet">
</head>
<body>
<p style="font-weight:400;">The spectacle before us was indeed sublime.</p>
<p style="font-weight:600;">The spectacle before us was indeed sublime.</p>
</body>
</html>
In my browser the 400 is lighter than the 600, so this might be computer specific.
The most likely reason is that you have installed a faulty or incomplete version of the webfont locally/on your computer.

Google font CDN: font weights not displaying as expected

I'm trying to use Lato from Google Fonts in my site. I see on fonts.google.com, Lato has distinct font weights, and they are obvious differences:
https://fonts.google.com/specimen/Lato
In practice, I'm not seeing much of a difference between these, which complicates design on my site.
Can anyone tell me if I'm using Lato and font weights properly, or show me how to use the font weights?
https://plnkr.co/Ng6Xk9S3TqGA2xzl7Nne
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:500,600,700,800" rel="stylesheet">
</head>
<style>
body {
font-family: 'Lato', sans-serif
}
</style>
<body>
<div style="font-weight:500">This is a test!</div>
<div style="font-weight:600">This is a test!</div>
<div style="font-weight:700">This is a test!</div>
<div style="font-weight:800">This is a test!</div>
</body>
Thanks to Andrew Li, I realized I was including font-weights for Open Sans, not Lato. Here's a fixed Plunkr:
https://plnkr.co/edit/9mKXYie2BdMvkf3uuvgn
The fix was:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

oswald font from google fonts not works

I'm trying to design a web page, for some of the headlines I like to use oswald font, so inserted the following line of code in the <head> under the '':
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Oswald:400,700"
media="screen">
but it does not work.
I test the page locally.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Oswald:400,700" media="screen">
<h1 style="font-family: 'Oswald'">It works</h1>
You have to use exactly tha same name of the fonts declared on the google css:
html{
font-family:"Oswald"; // Capitalized Name!!!! :)
font-size:14px;
}
If you visit this link - https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Oswald:400,700-
you´ll notice that they declare font-family: 'Oswald';

Which is more efficient considering page load time, using local font files or google web fonts?

I am using custom fonts in my website. I could use a local font file:
src: local('Ubuntu'), url('fonts/ubuntu.woff') format('woff');
or just use google's:
src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
Which would be faster, considering page load time?
I set up a GAE app with two test pages, one using Google Web Fonts and one using a local file. I made sure there was no caching and recorded how long it took each page to load. This was repeated 20 times on Chrome.
Results
Average load time (Google Web Fonts): 486.85 ms
Average load time (Local file): 563.35 ms
Code
fonts-google.html
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link href='both.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
fonts-local.html
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link href='fonts-local.css' rel='stylesheet' type='text/css'>
<link href='both.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
fonts-local.css
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: normal;
src: local('Ubuntu'), url('ubuntu.woff') format('woff');
}
both.css
h1 {
font-family: 'Ubuntu';
}

Resources