We are currently loading a couple of fonts on our site from google fonts using the following link
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons%7CRoboto:300,300i,400,400i,500,700&display=block">
As you can see, at the end of the query string, we have display=block to stop the font from rendering before it's loaded (as it adds font-display: block). However, this adds block to all declarations of every font face. Is there a way to only add this to the material icons font without having to make 2 separate requests?
Related
Do i need to use both rel="preload" and font-display="swap". Since rel="preload" prefetches the required font, is it necessary to add font-display attribute too?
<link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Magra&display=swap" as="font">
It depends on the intended result.
With font-display: swap, text is immediately rendered using the fallback typeface specified in your font stack while the request is made for your font. The fallback is whatever system font comes next in your font stack as listed in your font-family property.
Once the font is downloaded, it will be swapped in for the fallback.
This is just one option and you don't need to use it. For example, the immediate rendering of text when using font-display: swap creates a flash of unstyled text (FOUT) for the user and possible shifts in layout when the fonts swap, which can be undesirable.
You could opt for font-display: fallback, which attempts to account for this by hiding any text on screen for the first 100ms, optimistically hoping that your font downloads in that time frame.
If your font downloads within the first 100ms, it gets applied to the first visible text shown to the user (no FOUT).
If not, at 100ms the text gets rendered with the fallback typeface and the same pattern as font-display: swap resumes with your font getting swapped in once it eventually downloads.
I want my global CSS file to load asynchronous, i.e without render-blocking. My page is waiting for FCP until it gets CSS loaded.
So, How can I achieve this in next js.
What I am getting :
<link rel="stylesheet" href="/_next/static/css/eb4e3a560474a24ae771.css" data-n-g="">
What is Expected :
<link rel="stylesheet" href="/_next/static/css/eb4e3a560474a24ae771.css" data-n-g="" media="all" onload="this.media='all'">
NextJS documentation on Font Optimization https://nextjs.org/docs/basic-features/font-optimization says that they transform provided <link> to preconnect with added style:
// Before
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
// After
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
#font-face{font-family:'Inter';font-style:normal...
</style>
Now, you just need to adapt GET parameter display=[value] to adapt to font-display standard https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/font-display. The list is:
/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
Many are for mostly non-blocking (small block) display. All of them are explained in the Mozilla link, but the one I prefer, font-display: swap that gives extremely small block for font to load and if not in time, infinite swap period to change the font everywhere when it's loaded:
swap
Gives the font face an extremely small block period and an
infinite swap period.
Font block period
If the font face is not loaded, any element
attempting to use it must render an invisible fallback font face. If
the font face successfully loads during this period, it is used
normally.
Font swap period
If the font face is not loaded, any element
attempting to use it must render a fallback font face. If the font
face successfully loads during this period, it is used normally.
This way we can chose what fits better for us. If it still blocks a lot, I guess you'll have to put the link at the bottom of page.
I'm trying to add a Google font to the Wordpress Cyberchimps responsive theme.
https://cyberchimps.com/forum-topic/where-do-i-override-the-default-font/
I've tried to embed the link to the font in the header, but it doesn't update to use it.
How can I use the custom font?
To use google fonts in your website, you simply need to put a link in the head of your page ( in a similar manner like you add css files ). Like this :-
<link href='https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>
And access it in you css like this :-
.im-fell-dw-pica-font{
font-family: 'IM Fell DW Pica', sans-serif;
}
Here 'IM Fell DW Pica' is the google font required.( Note that sans-serif is defined after our required font 'IM Fell DW Pica'. This is done so that the browser loads sans-serif font if our google font is not loaded for some reason. )
You can now apply this class to the element you want like this :-
<div class="im-fell-dw-pica-font">Some random text</div>
I'm blocked by a question, on some Android device, I type some emoji and save them to database.Then load them and display in html page, but the emoji is invisible if set a font-weight: bold.If set font-weight: normal can display.
How does css font-weight work?
How does the browser parse CSS when it sees font-weight:bold or font-weight:normal?
System will call a bold font file (e.g., see Google Fonts which will list different weights of a font family) and if you don't have that font file on your device, it will fail to display the characters (actually for regular characters system tend to load a similar font in this case, but emoji characters are not regular).
You can include webfonts and contain the bold family in <head> section. E.g.,
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
I'm using the import thing in my CSS, like this
#import url(http://fonts.googleapis.com/css?family=Kite+One);
But the font doesn't load all the time. I'm still working on the CSS and refreshing periodically. Is it because of that? Is there any way to fix this?
Instead of #import, you should add a link to your page by..
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
Then, add the font under the body element in your stylesheet using font-family.
For Instance,
body{font-family: 'Kite One', sans-serif;}
For further doubts, refer here.
It should work now.
If you are having issues with Web fonts, you need to take a look at this
Web Font Loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.