I've just deployed my website that I built using react.js, I am using Raleway font for the whole website, but when I opened it with my iphone using safari browser it shows me another font, how can I solve this problem ?
Do you import your font in your website? You can add those lines in your index.html so anyone that doesn't have installed Raleway (including mobiles apps) will be able to display it.
<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=Raleway&display=swap" rel="stylesheet">
If you need specific styles, you can select them and generate your import lines here: https://fonts.google.com/specimen/Raleway
Related
I'm testing my page's performance through GTmetrix and I noticed that the biggest element loaded on my page is the font-family. Is there a way to lower this somehow? Here is how I load my 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=Inter:wght#500;600&display=swap" rel="stylesheet">
If you're using Google Fonts just for a few words, consider using the text parameter in the URL. The font will then only be loaded for the specified letters/characters.
Let's say you wanna use the font for the word 'Welcome'. By inserting &text=Welcome in the URL, you can load the font just for the six different letters of this word:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#500;600&display=swap&text=Welcome" rel="stylesheet">
This will reduce the size of the font file considerably.
Of course, this will not work if you need the whole set of characters.
I use 2 google font on my site.
In the HEAD preload the fonts:
<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=Biryani:wght#400;700&family=Noto+Sans:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
I set css below this:
body{margin:0;padding:0;font-size:14px;font-family: 'Noto Sans', sans-serif;line-height:1.2em ;background-color:#F8F9FA;}
h1,h2,h3,h4,h5,h6{font-family: 'Biryani', sans-serif;color:#404040}
Page Speed Insights, on the other hand, measures a CLS of 0.36 and reports most problems on the title and block of text.
Please help, what can I do.
The tested page url is: https://megveszlak.hu/elado-haz-godollo
Thank You
In our website we using external 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=Rubik:wght#300;400;500;700&display=optional" rel="stylesheet">
As a result it returns CSS like this:
#font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 300;
font-display: optional;
src: url(https://fonts.gstatic.com/s/rubik/v19/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...
When new users first time comes to site fonts are never do apply - and that acceptable to me, because it's one of the drawbacks of using font-display: 'optional'. Also I can confirm that both CSS file from Google and fonts are still loaded by the browser and are cached (they are just do not apply on first page visit). CSS file is cached for 24h and font files itself are cached for 1 year. If I reload same page (Ctrl+R) then fonts are applied. So far all good.
But the problem is that if I open same page in new Chrome tab (i.e. new session) then fonts doesn't apply again. I checked DevTools's Network tab and I can confirm that fonts were loaded from Disk Cache. Since fonts were loaded from cache I expect that they will be applied every time until cache time expires - but that doesn't happen. Fonts are applied only if I'm refreshing same Chrome tab. New sessions (new tabs) gives me page without fonts.
I understood 1 thing: if I do simple page reload (Ctrl+R) then I see that fonts were loaded from Memory cache, and fonts are applied. But new sessions (new tabs) will cause fonts to load from Disk cache - and probably that's why they don't apply. On my developer machine I have pretty fast M2 SSD disk, so it's a little bit weird why Disk cached fonts doesn't apply.
One more thing may worth to mention - I have pretty bad Total Blocking Time score (Core Web Vital TTB metric). Can it be the reason why Disk cached fonts do not apply?
Is there some way to fix this problem?
Thanks.
This is happening because you are using display: optional, as stated yourself. You need to make this to display: swap in order for things to work properly. Below is what your updated links would look like:
<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=Rubik:wght#300;400;500;700&display=swap" rel="stylesheet">
Notice we are not using optional display anymore, so now cached fonts will apply, as requested.
If you are loading the external Google links in your <head> like this:
<head>
<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=Rubik:wght#300;400;500;700&display=optional" rel="stylesheet">
</head>
Then in your CSS, you do not need to use the #font-face, you simply add the font-family to your class/tag, like so:
body {
font-family: 'Rubik';
font-size: 16px;
}
Just I have tested on my system on every new tab will load from the memory cache only if we use swap in the link tag.
<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=Rubik:wght#300;400;500;700&display=swap" rel="stylesheet">
I am currently learning Google fonts API, and the current version as far as I know is version 2.
Applying fonts goes well but when I apply ready to use font effects it fails.
Here is the code that doesn't work (effect=fire).
#import url('https://fonts.googleapis.com/css2?family=Sofia&effect=fire');
And when I switch the API version from css2 to css it works.
#import url('https://fonts.googleapis.com/css?family=Sofia&effect=fire');
I am using Chrome.
So the question is, does Google fonts API v2 support ready to use font effects? Or there is another way to get it done in v2?
What I have tried:
Font effects working in earlier version.
Font effects not working in version 2.
I read the following two offical links:
CSS API update
Get Started with the Google Fonts API
I was struggling with it too; but if you use css instead of css2 in the api link, things work; I have attached the working code for you.
#import url('https://fonts.googleapis.com/css2?family=Sofia&effect=fire');
<html>
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Chivo&effect=fire" rel="stylesheet">
</head>
<body>
<h1 class="font-effect-fire">This text is on fire<h1>
</body>
</html>
I'm trying to use variable fonts for the first time, namely Quicksand from Google fonts. Here are the tags it gives you...
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
It's definitely using Quicksand on the page but the problem is that when I change the font weight from 400 to 500 it doesn't change. 300 does nothing either but if I change it to a value above 550 it seems to go very bold. It's as if I've set it to download just two different weights, a very light one and a very bold one.
I looked around and found an article that said to do this:
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#100..900&display=swap" rel="stylesheet">
but that doesn't seem to have change anything. Am I missing something?
I found the problem. I was specifying a range of weights which exceeded the range available for this font. Instead of doing this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#200..900" />
I should have used 300..700
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300..700" />
Also, I wasn't always doing a proper refresh when changing the import because I've got too used to React's hot reloading but obviously if you change the font links in the head then you have to F5.
You aren't importing the font correctly. Here use this instead:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
On google fonts page you need to select all the font weights you want to import. Not just the base if you want to work with font weights.