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
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 am using this great font from Fontsquirrel, Munro. (http://www.fontsquirrel.com/fonts/munro)
I wanted to use this font in a webpage of mine. I've put the .ttf file in a map named 'fonts' and referred to it in CSS.
nav a{
background:#9cf2e6;
display:inline-block;
color:#0;
text-decoration:none;
font-size:15px;
font-family:'Munro';
margin:13px 3%;
padding:7px 2%;
}
Then I noticed something. The O's in my webpage are filled. As you can see it shouldn't do this, because it did not do so in Photoshop or the webpage from Fontsquirrel. Also I tried to modify the font in Glyphs but there seems to be nothing wrong with it there.
My question: how will I undo the filled letters in this font? Is this a problem because it ain't a webfont from Typekit or Google fonts?
Thank you so much for all the help I can get.
I'm unable to reproduce this on Windows 7 (Chrome, Firefox, IE) with Munro installed locally. The letters display just fine (see image below). And I think that's the bigger issue: fonts not made for the web are likely to be rendered very differently across browsers and platforms (if at all). If you want to make sure these buttons look the same for all your users, stick to the images you created with Photoshop (and perhaps save them as PNG-8 with transparency rather than PNG-24 to shave off some kilobytes).
Technically, you can turn any TTF file into a web font, using FontSquirrel's Webfont Generator, for example. The font's license has to allow this, of course, because you'd essentially be redistributing the font. Just placing the TTF file in a /fonts/ folder and using font-family: Munro;, however, is not going to cut it, and only works for you because you have previously installed the font on your computer.
If I have, say, the Ubuntu font installed on my computer and I visit a webpage that references it in its stylesheet, my browser will not bother downloading it from the webserver, but instead loads it from my hard drive (or memory), which saves bandwidth and is much faster. I've also found that having a font installed locally can actually make it render differently than when it's loaded as a web font (e.g. WOFF).
So yes, it probably is a problem because this particular font is not very web-friendly, but even with web-friendly fonts, like those available through TypeKit or Google Fonts, you can still run into rendering differences (most noticeably between Windows and Mac). While it may be a fun exercise to try and recreate the images using just CSS, you're probably better off saving these buttons as images, or using a font that is web-friendly. Something from the Monospace category in Google Fonts, perhaps?
http://i.stack.imgur.com/9SuMr.png (Windows 7, Chrome)
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
A friend of mine threw a website I made through the tool at http://analyze.websiteoptimization.com/ . When he came back to me, he insisted that my browser was preloading tons of unrelated images on only the homepage of the site.
I came back to him, insisting that YSlow (and other 'network' tabs in browsers) prove that only specifically-displayed images and content gets loaded on the homepage-- nothing else. I insisted that the statistics from that site are only for a complete visiting of the site, and downloading all the required images.
However, he's not convinced, believing that some browsers (i.e. IE) will pre-load that unrelated content regardless. For that reason, he uses a global CSS stylesheet, and then applies changes to individual pages by loading a separate stylesheet.
I thought it was best practice to minimize requests to the server, not to add more, which is why we have CSS sprites. I also thought browsers never load images unless they're needed to display the page.
I don't believe I can accept an answer without healthy discussion.
Am I correct in that the browser's not loading EVERYTHING on every page?
Is the above tool incorrect?
Is the lesson my friend's learning from the tool's results incorrect?
Thanks.
The browser will generally only load what's actually shown in the page. (There may however be exceptions in some exotic browsers, like Opera Mini.)
The WebSiteOptimization tool will only look at what images are referenced in the HTML and in the CSS, not which images are actally used in the page.
When I analyse my own webpage, which has eight different background images that are shown one at a time by random pick, the tool says that all eight images are loaded, just because they are in the CSS. Checking the network traffic in Firebug and IE developer tools shows that they aren't.
According to me
Browsers do load cached images at time but newer updates can check if the image has changed. Also there are permissions which coders can set to allow browser caching or not.
when using yslow or Google page speed which is a better tool try and use control+f5 to refresh your page so the site is forced reloaded without any offline files.
You can also set Brower permissions based on your preferences.
I also want to add a little about your last line a browser will load all images linked in the code even if there css property is hidden.
It always loads thing in the img tags first and then all images in the css code.
It will also process the image request in sequential order ie first come first server
I hope this help.
Every time I refresh the page I have to wait for a bunch of requests to return before I actually see the fonts appear. The fonts are cached and all these requests return a "Not Modified" header. Is it proper browser behavior to not display the font until it is made certain that the font hasn't been modified? Am I missing something?
I understand that I can use a generic fallback font until the proper fonts are loaded, but this will break my page.
I'm seeing this behavior in Chrome and Firefox, both on Ubuntu. My internet is really patchy, so sometimes I have to stare at a fully loaded page with invisible text, it's really frustrating.
You should always use a fall-back font, and design your page such that it will not break the page. Sometimes the Google font service may be unavailable; other times, your users could be behind firewalls that prevent downloading the fonts. And, as you've seen, your fonts won't display immediately until the browser is satisfied that the fonts have been downloaded properly.