How can I reduce external webfonts lag time on page load?

Question

We use cloud typography for a selection of web fonts chosen by a designer. The response time is creating a lag that people have begun to notice.

<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />

Is there a way, while still respecting CT's licencing model to bring these fonts in locally? Or do I switch to standard web fonts?

Do they have a smaller/min/condescend url.. otherwise I would say no initially. . Page headers n all that would be separate. . Do they have other servers/hosts? Also check if they gzip the file — Angry 84, Sep 30 '15 at 18:52
You could combine your other css into a single or dynamic file. . Say using php... then reorder so only two requests.. as both will load at once n first yo finish would let next inline download start. Or find another like google fonts — Angry 84, Sep 30 '15 at 19:02

score 1 · Answer 1 · edited May 23 '17 at 11:44

To sort of explain my answer/comment...

Say you have something like this for example..

<link type="text/css" rel="stylesheet" href="localfolder/main.css" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="localfolder/other.css" />
<link type="text/css" rel="stylesheet" href="localfolder/again.css" />
<link type="text/css" rel="stylesheet" href="localfolder/some.css" />
<link type="text/css" rel="stylesheet" href="localfolder/thing.css" />

You can change this to something more like...

<link type="text/css" rel="stylesheet" href="localfolder/css.php" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />

With the php file of css.php being like this

header("Content-type: text/css");
require "localfolder/main.css";
require "localfolder/other.css";
require "localfolder/again.css";
require "localfolder/some.css";
require "localfolder/thing.css";
exit;

Basically this will combine all of your local CSS into a single script, which you can then use a PHP cache control and gzip to ensure your local CSS is sent as quick as possible in a single http/file request ... And your second link for typography tag will start downloading straight away as well

As soon as your first link tag (the css.php) is finished being downloaded/checked.. It will continue with anything else in the head tag until they are all done.

This may work for you, it really does very per site/design.. Basically most browsers will download only so many files at once... refer to Max parallel http connections in a browser? for some more info on this...

--- Another possible option ---

You can load the page without the typography link/tag.. and then add it dynamically via javascript.. see something like this How to load up CSS files using Javascript? for an example..

The side effect here depending on how the site is designed, would be that you might see old/default fonts for a few seconds or something.. But you can hide this from the user with a re-design possibly or some form of loader..

Otherwise the only other option i can think of is to try finding the same font or similar with google fonts https://www.google.com/fonts as they do load quicker in general.. And the advantage of using a google hosted css/js/lib is that alot of users also already have them cached because they are common across alot of other sites.

Hopefully this can give you some idea's or possibly help with a solution, but it is a tricky question and a good one... This is how i would deal with it if i was in the same situation.

How can I reduce external webfonts lag time on page load?

1 Answers1