Loading font-face before img src

807 views Asked by At

Given a simple HTML page made up of text and several image tags, with CSS, but without any Javascript, is there a way to tell the browser to load font-face URLs before the image sources?

It seems that many browsers will wait until the first occurrence of a tag that requires the font-family before requesting the font (source).

However, even if I place a tag with style="font-family: 'libre_baskerville' !important" at the very top of the body, it doesn't trigger the request until after the image tags sources have been requested, as seen here:

enter image description here

This causes issues due to browsers' (and HTTP spec itself) maximum concurrent connections to the same domain. Since the images are triggered first, the browser has to load images before it can draw text.

The images, being larger files, can take longer to download than the font-face. However, the text is typically more important (and certainly, the text in the first few lines is more important than an image that is below the fold).

1

There are 1 answers

0
DRobinson On

A couple of the potential solutions I've considered:

Possible Solution #1:

Avoid using <img> tags, and to use another tag with a CSS background-image. The has the disadvantage of losing the semantic meaning that the image tags provide. This also requires rules to set the width and height of the tag to match the image; these dimensions may not both be known, and if they are it's still more to maintain. It also will not work if CSS is not enabled (though this probably isn't a big concern).

Swapping out the images with tags that each have a background-image set allows the following order for network connections: enter image description here

Possible Solution #2:

Host the font (or, potentially, the images) on a separate different domain. While this won't change the order in which files are requested, it will prevent the "maximum concurrent connections to the same domain" issue.

This has the disadvantage of adding dependencies (increasing chances of down-time, latency, etc.), as well as having to manage multiple domains simply for fonts. This also cheats by providing a means of avoiding the question, rather than an answer - though it provides the practical results.