Normally UX designer, I'm currently also product manager for a range of web tools but my dev skills aren't very strong at all, so forgive me if this is a silly question. We're building a range of Bootstrap pages for a set of corporate tools, and at the moment we're using the Google Fonts API for our fonts. I'm a bit worried about load-time, and we think it may be Google Fonts gathering data. Before we unpick our current designs and install the font files on the server, I was wondering if anyone else noticed any load time when using Google Fonts and whether uploading the fonts themselves was a solution - or whether that's just going to make it even worse?
Short answer: Google is much faster than you hosting it yourself.
Long Answer: Putting it on your own server might seem like a good idea to improve load times. After all, the files are closer to your webpage. But, no. After all, when a user goes to your website, initially they just get some HTML. Here we have references to other files: Images, JS, CSS, and, in your case, Fonts.
For each of these external resources, the client will make a new call to the webserver where the file location is provided. So wether you host files yourself or reference google, the call to that resource will happen at the same time.
However, unless you are an exceptional company, googles server wil respond much faster. It will also use googles bandwith, rather than yours, saving you (maybe, a little bit) of money on that.
Loading files from third party servers (google) can slow down loading time since the browser has to make a request to a different machine. Basically loading everything from one domain should be faster than loading files from different webservers.
However – chances are that the google font is already in the visitor's cache file. This again would speed things up since the browser would not have to load it again.
When you request a web page, you request more than the web page. You are requesting the HTML file, all images, all CSS files, all JS files, all Font files, etc.
Your server will rarely let you request all of those items at once. It will instead limit the number of concurrent requests and ask you to queue up the rest. This isn't a huge deal, but the more requests, the more likely something is going to be queued. In addition, many servers will block all requests while a JS file is being downloaded.
This is why it's better to request 1 100k CSS file rather than 10 10k CSS files. The data is all the same, but you lose efficiency by having to make all those separate requests.
So, at least for CSS, one recommendation is to simply combine all your CSS into one CSS file.
You can't do that with fonts, though.
The recommendation there is to load them from 3rd party servers. There are a few reasons for this:
- if the 3rd party server is popular and the file requested is popular, chances are it's already cached in the end-user's browser
- if it's a large 3rd party (aka Google) they likely have a huge infrastructure with plenty of bandwidth
- if it's a CDN (Content Delivery Network...which I believe Google Fonts is) then you have the added bonus that the data is hosted on multiple servers world-wide and the request is routed to the location closest to the person requesting it.
So, in general, always load common assets from large 3rd parties whenever practical.
You should put 'em on your server :-)
1) It will be faster, even if they have it cached from a prior site that uses Google, it will create the cache 1st time anyway so it would only affect the 1st experience.
2) say the google server goes down and you haven't put them on your server.. then those fonts disappear and are replaced by whatever their browsers default is.
Definatly should upload to server, calling the Google API is quicker to set up and what not but there is always the chance of it going down without you even knowing..