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
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'm trying to use the Material Icons font from Google Outlined set that just came out, but I can't figure it out. There is no information nor documentation.
Some icons are being displayed as filled and some as outlined.
eg: The account_circle icon from the Outlined set
How are you supposed to use the Outlined set? Any help is appreciated.
Update as of 2021
In short Google isn't (still) advertising the fact that you can load the different set via the Google API url on the Material Icons website. They are only, as per Google Material Icons instructions, talking about the default filled set which uses the following html tag to enqueue the Material Icons base stylesheet.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you want to use the Outlined, the Two Tone, Round or Sharp sets, you need to add the following to the Material Icons url.
Theme
URL parameters
CSS class
Filled (Default)
?family=Material+Icons
material-icons
Outlined
?family=Material+Icons+Outlined
material-icons-outlined
Two Tone
?family=Material+Icons+Two+Tone
material-icons-two-tone
Round
?family=Material+Icons+Round
material-icons-round
Sharp
?family=Material+Icons+Sharp
material-icons-sharp
Better performances
Like Google text-based font, Google Material Icons also accept the &display=swap url parameter.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
You can learn more about &display=swap # https://developers.google.com/web/updates/2016/02/font-display
You can also specify a <link rel="preconnect" tag in the <head> of your document to improve load performances.
<link rel="preconnect" href="https://fonts.gstatic.com">
Example
<!--head-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!--body-->
<span class="material-icons-two-tone">
account_circle
</span>
<span class="material-icons-two-tone">
check_circle
</span>
<span class="material-icons-two-tone">
favorite
</span>
Update, with Answer:
Looking at the Readme in the source code, https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons
You Append Outline to the icon name. So for you:
import { AccountCircleOutline } from "#material-ui/icons";
or
import AccountCircleOutline from "#material-ui/icons/AccountCircleOutline";
I do believe this answers your question. A "correct answer" is always nice! Thanks!
i'm trying to optimize this website: electronicsportsitalia-it and when i try to analyze it on Google PageSpeed the platforms says that there is a google font blocking the page rendering:
https://fonts.googleapis.com/css?family=Lato:300,400,700
The font firstly was loaded through php but then i inserted it directly in html code trying to load it with this code: <link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> -put also before the </body> tag- but it didn't worked.
So i tryed to load it with Web Font Loader and actually the website is runnging this script:
`
</script>
<script>
WebFont.load({
google: {
families: ['Lato']
}
});
</script>`
but always the same problem on PageSpeed.
Can someone help me?
You can preload any styles (including google fonts)
<link
rel="preload"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
You can read more on web.dev
UPDATE
Base on Lucas Vazquez comment I've also added &display=swap (which fixes this issue "Ensure text remains visible during webfont load")
You question boils down how to include less critical CSS asynchronously. I recommend to read this article.
Its similar to Claudiu's answer however, it is recommended in the article not to use preload, because of this:
First, browser support for preload is still not great, so a polyfill (such as the one loadCSS provides) is necessary if you want to rely on it to fetch and apply a stylesheet across browsers. More importantly though, preload fetches files very early, at the highest priority, potentially deprioritizing other important downloads, and that may be higher priority than you actually need for non-critical CSS
Here is the alternative:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
This is how it works. The attribute media=print will skip the css on page rendering. Once the page has loaded, it will load the print css. The onload JS event changes the media to all, now the font will be loaded and change the page rendering. Most importantly, the font will no longer render-block your page.
For the edge case, that a user has js disabled, the "noscript" tag will load the font directly.
You can take advantage of the onload attribute like this -
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap"
rel="stylesheet"
type="text/css"
media="print"
onload="this.media='all'"
/>
Set the media attribute to print at first, but change it to all when the download callback fires.
I noticed that Laravel added this tag to its html head output recently:
<link rel="preconnect" href="https://fonts.gstatic.com">
I copied it and added it before my font request, i.e:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" id="google-fonts-css">
This simple tag took me from a Mobile Pagespeed score of 80 up to 95, but I can't be entirely sure that it was in fact the tag I have to thank for this score increase - PageSpeed is unpredicatable. I'm not sure if it's just a Chrome thing or a new standard.
In my case, I will generate my font using a font-face generator tool which is easier to use and less hassle but when I use google fonts, this is what I do.
You can use style element at the end of body, just before the closing </body> tag:
<style>
#import "//fonts.googleapis.com/css?family=Lato:300,400,700"
</style>
or you can refer to How to keep CSS from render-blocking my website?
The following font files must be loaded before this JS file: https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2
https://fonts.googleapis.com/css?family=Lato
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
On the following site the titles (.post-header) should look like in this picture (Google Font: Cookie). If i analyze it, it seems to take the code but doesnt work. Can you help?
http://www.vintagemaedchen.de
The CSS file of the font is missing. You have to insert the following line into the <head> area:
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>