Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
We have a website - everything is working but web fonts flicker for a split second before the page loads.
Desired behaviour is that it doesn't flicker.
This doesn't seem to happen on other sites & I can't see any difference.
We are using fonts.com fonts.
All I can find on Google is an issue with Firefox - but this happens in all browsers for me.
Is there something obvious I have missed? How can I fix this?
You're probably seeing what is called FOUC (flash of unstyled content). It's a common issue. I suppose you can try the web font loader for more control of the font loading.
There's a couple ways to battle this.
1 - Since you're pulling the font from a website and you don't have the font hosted locally on your own server, there's a delay between your page loading and the font loading from fast.fonts.net.
If you download the font (.ttf) and run it through fontsquirrel's webfont generator, it should elevate some of the loading issue.
2 - Since it's only flickering for a few seconds on page load, you can hide your webpage's content a short duration while the font loads (200 milliseconds). This will ensure that when your page content loads that your user doesn't see the flickering.
Paul Irish has an article about this: http://www.paulirish.com/2009/fighting-the-font-face-fout/
It happened to me before and I went to through these two steps:
1- Use preloading:
In your headers you can add this
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin ></link>
Make sure the href path and extensions are correct.
With preloading, your fonts will start downloading before other assets and it will improve the chance to not get flicker, but it might not be enough depending on if your webfont is too weight.
2- Use font-display:fallback
This property blocks displaying the text for a short time while loading and if passed this time doesn't load it swaps to the default font.
For example:
#font-face {
font-family: ExampleFont;
src: url(/path/to/fonts/examplefont.woff) format('woff'),
url(/path/to/fonts/examplefont.eot) format('eot');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
If doing all this, your font takes even longer to load and you don't want the flicker to occur, instead of fallback you might want to set font-display: block . You can check about this property here
It is not recommended because if download fails, you won't be able to display your site, but if flicker is a priority, then it can help.
Source: https://web.dev/optimize-webfont-loading/
A good library that solved my problem of loading the fonts synchronously was https://github.com/typekit/webfontloader
It is very simple to use:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>
Related
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).
I'm trying to develop a site for customer - and I encountered a weird thing - my fonts are, so to speak, blinking. To be more precise - not always - but mostly when I go t another subpage - before page display's custom fonts on headers, we can see default font for just split of a second. That creates unwanted effect.
I'm using Bulma, recompiled from scss of the newest version, and font called Museo Sans - which I serve from my server (not from Google). When I run GtMetric there is no latency in font reading and I also use a fade in script which helps a bit with the described effect, but still it's visible. Also the site is relatively small, so no latency due to number of requests or script's size.
My guess is that it may have something to do with the order of my css. I start with font-face declaration loading fonts, then I go to basic mixins and reset. I tried many things but no results. I have to add that it's not the first site I did with that particular setup - wordpress, bulma, scss.
The site's dev version is here:
https://protonads.mediamachina.net/
css here:
https://protonads.mediamachina.net/wp-content/themes/proton/proton.css
Thank you in advanced for any suggestions.
After a bit of reading the internet's sources I got the answer. So including fonts, from external source or local, with font-display: swap; will have two results - FOUT - because we're swapping fonts after it has been downloaded by the browser, second - a bit slower loading time, as we're letting he site to block rendering until he font is loaded.
So unfortunately no good option is available. Or at least no good option was I able to find.
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('inter-v2-latin-ext_latin-regular.woff2') format('woff2'),
url('inter-v2-latin-ext_latin-regular.woff') format('woff');
}
On a site I work on, we use SVG for the logo. I've noticed a few times that the logo occasionally doesn't load the correct font when it renders in Google Chrome. I haven't been able to replicate this anywhere else, but it has happened frequently enough that I'm concerned it could be happening to other Chrome users.
You can see the SVG here: https://jsfiddle.net/rmlumley/8n5Lrq9z/
I'm loading in the SVG via CSS as a background image for the h1 in this code:
<li class="home"><h1><span>Morgridge Institute for Research</span></h1></li>
When I load the SVG directly in the browser, it always works and loads in the correct font. That said, occasionally when it loads in on the page in Chrome - the font looks wrong. I've uploaded how it renders incorrectly.
Is this a known issue with Chrome or any suggested work-arounds so that this doesn't happen? Is there something inherently wrong with my SVG code?
Your SVG is not using any font other than the default browser font (normally Times New Roman). That's because the SVG is not specifying a different font.
You may be thinking that the following in the SVG is changing the font:
<style type="text/css">
#font-face {
font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}
</style>
But this is doing nothing. It should be something like:
#logo {
font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}
But even if you do that, the only users that will be seeing "Garamond", "Baskerville", "Baskerville Old Face" or "Hoefler Text", will be users that have those fonts installed on their computer. You may be seeing Garamond (if you have that font installed), but most people will still just be seeing Times New Roman or whatever they have their default font set to.
If you want to use another font, then you would need to fix your #font-face
declaration and use Data URIs to embed your font in the SVG.
But there is a much better solution to this problem however. And that is to convert your text to outlines (paths). Then all your font worries disappear, and you are guaranteed to have the correct representation of your logo font, in everybody's browser.
I have a system where it was loading a fontface from my own server.
I replaced this font for the google's webfont version (droid sans).
In order to accomplish this, I removed all the declarations that were calling this font on my server, then I added the following line on each file that were using the font:
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
Ok, great! now I'm loading the font from google's repository. Nice!
The Problem:
Now, in some pages where I had only one request for the droid sans font on my server, the font located on google's repository is being called twice or three times, depending on the page.
At first I thought it could be because the browser was downloading some of the variations of the font, depending on the page.. but I'm not confortable with this explanation because I believe should download everything just once. I really didn't want these unnecessary requests..
That said, I'd like your help to know if there's a way I could do to make sure it will be loaded once and that's it! Also help clearing to me why I'm getting this behavior.
See image bellow:
I am currently running a Magento Store through Cloudflare and I have been experiancing duplicate orders which some stack overflow users have suggested is due to Cloudflare. In order to test this, while still using my Cloudflare subscription to some extent, I decided to create CName Records (eg: cdn1.mydomain.com) for my Media, Skin and JS files and have cloudflare only serve these resources.
It seems to be going well except I am getting strange behavour with FireFox browsers.
My styles get linked to the page correctly with the following code:
<link rel="stylesheet" type="text/css" href="http://cdn1.mydomain.com.au/skin/frontend/theme/default/css/styles.css">
In my style sheet I link to my font packs with the following code (from IcoMoon):
/* BEGIN Install Custom Icons from IcoMoon */
#font-face {
font-family: 'icons';
src:url('../fonts/icons-v8.eot');
src:url('../fonts/icons-v8.eot?#iefix') format('embedded-opentype'),
url('../fonts/icons-v8.svg#icons') format('svg'),
url('../fonts/icons-v8.woff') format('woff'),
url('../fonts/icons-v8.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This all works perfectly fine with cloudflare enabled on my root domain and when it is disabled, however, when I turn it on for cdn1.mydomain.com.au, my icons in FireFox no longer load. They do however load in Chrome with no problems.
When looking at the net tab in fire bug, I can see that Fire Fox is indeed finding and downloading the font pack as it responds with a Success Header(200 OK).
Is there anything I am missing as to why FireFox would struggle with showing the font pack?
This might be an issue with something like Rocket Loader. Does turning off that feature in your performance settings - if on - fix the issue?
The fact that issue is in one browser and not the other suggests to me an optional performance feature possibly impacting something).