: When using fonts in Bootstrap, is it quicker to use the Google Fonts API or to just install the font file on the server? Normally UX designer, I'm currently also product manager for a range

@Shelley591

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.

Vote Up Vote Down

@Eichhorn212

You should put 'em on your server :-)

Reason:

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..

Vote Up Vote Down

@Sent7350415

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.

The same applies to other assets like jquery libraries etc. as e.g. described over here: "Why you shouldn't use external javascript files" (http://www.elxis.org/de/blog/external-js-files.html)

Vote Up Vote Down

@Mendez620

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.

Vote Up Vote Down