My website uses React, shopify and currently I am trying load fonts on my website which are uploaded on the netlify server(same as where the website is hosted). However I can see a very visible FOUT when the website is loaded. Have used the below font load best practices :
using preload when trying to access the fonts
using font-display: swap
using fallback fonts
I would appreciate some help to avoid the FOUT seen on the website
font-display: swap doesn't prevent FOUT. Quite opposite - often it can cause it.
font-display: optional Can Solve FOIT And FOUT
This option basically makes web fonts optional, or to put differently, if the font isn’t there by the time the page needs it, then it’s up to the browser to never swap it.
But this is not the greatest solution because the web font won't load sometimes. What I would do is:
Keep font-display: swap but improve font style matching with the fallback font You can use font style matcher for that
Optimize font -> remove unused glyphs and weights
Serve font from the same origin as a website is served
If font is served from 3rd party service due to legal reasons you can cache it using Service Workers.
You might also don't care as this is a minor performance issue (usually).
Related
On my website, for some reason the Arial font is displayed differently on several devices.
It was fine and the complaints started to arrive approximately a month ago and I suspect that the root cause is somewhere locally (browser or OS).
All the problematic users sit on different versions of Windows and mostly use Chrome (but no everyone).
Tried to investigate this issue but did not find something in common.
Is anybody faced such a problem already?
Code:
<h1 style="font-family: Arial;">Title</h1>
I suggest you to put your fonts file in your website directory and set path from your directory.
(some times maybe that device has not your font.)
in top of your css file:
#font-face {
font-family: "BYekan";
src: url("../font/BYekan.eot?#") format("eot"), url("../font/BYekan.woff") format("woff"), url("../font/BYekan.ttf") format("truetype");
}
use it:
body{
font-family: "BYekan";
}
Yes, there is a reason for this. There's nothing to state that any given device, or browser for that matter, must adhere to any given standard for the rendering of fonts. Consequently, it's prudent to create overall website designs with the assumption that text will render inconsistently across browsers/devices. As soon as you assume rendered text will "fit in to this/that space" you're in trouble.
Instead create a design that deals with the issue of font rendering elegantly.
This should not be surprising, and what you call the "root problem" is actually not a problem, but simply how fonts work in the browser.
Without an explicit #font-face rule and real font sources, you're telling the browser that you don't really care what it loads, as long as the font that gets loaded matches, roughly, what you're asking for. If you ask for "Arial" then the browser will ask the OS for a font that claims to be in the Arial family, and different devices may (or rather, will) have different versions of Arial installed. So your content's going to look different for different devices.
However, and something a lot of people forget, it doesn't matter if that's the case. What matters is that your site content looks consistent. People are not going to look at your site on two computers at the same time and then notice that they don't look pixel-identical. Individual users are going to look at your content on one device at a time. So: is the look consistent on a single device? Great, you're done. Which version of Arial is actually being used is pretty much irrelevant in that case.
I mean this font collection: https://www.google.com/fonts
I want to use some maybe non standart fonts on my page. If I use Google Web Fonts on my site, will fonts be displayed properly? Or fonts from user's browser will be displayed? Or nothing will be displayed? Thank you.
caniuse # fontface – yes, you can, all modern browsers supports fontface.
The font you load will be used on all clients as long as the file from Google is available and the client understands this technology. Therefore you should not load too many fonts, because it dramatically slows down the page loading, as font files are pretty large.
Since you can specify multiple fonts in css, if the file is not available the second specification will be used. This should be something like "Arial", which is mainly available. The third specification can be something generic like "sans-serif". This assures that at least any font you want is used.
Nevertheless, the client will use any font if nothing appropriate was found. It will never silently display no text, just because your CSS does not specify something usable.
yes it will displayed properly and perfectly on web
so no need to worry, use it freely
I downloaded a font kit from font squirrel called DestroyRegular and I'm using font-face in my css. The initial rendering of the font seems much slower than it should be. You can see my site here. Can anyone give me advice on how to speed up the rendering of my font, or do I just need a new font altogether? Thanks
It will be slow because the fonts are downloaded and then rendered, hence, the more fonts you use, the more requests it will make, thus making your initial loading slow unless and until the fonts are cached by the browser.
If you use Google Web Fonts, they will show you a page load bar, more the fonts, more the requests, more time for initial loading.
You can also turn on Browser Leverage Caching to set expiration
headers which will drastically cut down http requests for you
I was searching the best-practice to implement a font inside a website and I still didn't found a real answer to this.
On forums and blogs many people say that using #font-face is the best way, other using Typekit or Cufon.
I don't like these 3 options.
Font-face render my fonts grainy.
Typekit is not freeware and do not have all the font that I'd like to use.
Cufon use canvas.
There are other way to implement fonts?
There is a way to render it with no grain?
Screenshots:
Mac
Windows
Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.
good luck…
EDIT:
once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…
greetings…
What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.
Using TypeKit uses #font-face, it's just loaded in a different way. Have you tried Google's webfonts too?
Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}
I use some fonts in my new website that do not exist by default on normal user computers.
After some search I got that there are some tools that might help, like Google web-fonts.
Fonts that I used are : Bebas , Sansation and Quicksand
But I couldn't find them on Google web fonts.
How do I do use these fonts ?
And what are other cross browser solutions?
Different fonts are created by different font foundries. Not all fonts will be found in the same place. And not all fonts are available to be used as web fonts because of font-licensing.
Fonts are not always free and good fonts are rarely free.
You can usually find out if a font is available as a web font, and who owns the font by googling the font name plus "#font-face".
You absolutely should know where you'll be getting the fonts you'll be working with in advance. If you have three fonts that come from three different font-services then that's bad. Firefox especially wont like it much and you'll have some pretty bad fout problems.
Fortunately for you, all those fonts are available through font-squirrel
Bebas
http://www.fontsquirrel.com/fontfacedemo/Bebas
Sansation
http://www.fontsquirrel.com/fonts/Sansation
Quicksand
http://www.fontsquirrel.com/fonts/Quicksand
What you will want to do is download all those fonts, them run them through the #font-face generator
http://www.fontsquirrel.com/fontface/generator
HOWEVER It reads to me like you don't really understand what #font-face is, or how it works. So I'd recommend reading up on it some more.
I am not sure what exactly you mean, but if you want to convert your website's font into a custom font which is viewable for the visitor, you could try use the curfon solution.