Loading an external font via inline CSS

html css fonts inline font-face

88,884

Solution 1

Is it possible loading an external font with inline css? NOT with an external CSS file [....].

Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request.

It may also be possible to use this technique in the way you describe if the browser you're using supports it.

<style>
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: local('PT Sans'), local('PTSans-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
  }
  @font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
  }
</style>

Every modern browser supports WOFF2, so you should probably use that and only that for the foreseeable future. Also, this technique will improve your page speed scores, but will degrade performance overall (even for first page loads), unless you're only base64-encoding critical page assets (e.g. glyphs of the font shown above the fold) and asynchronously load the rest.

Performance-wise your best bet right now is to use Brotli compression and pipe the webfont stylesheet down with HTTP/2 Server Push.

Solution 2

You cannot include a @font-face rule in a style attribute (which is “inline CSS” in the most narrow sense). By the HTML 4.01 specification, you cannot include such a rule inside the body element at all (“inline CSS” in a broader sense, which includes style elements). But in practice it is possible.

In practice, if you include a style element inside body, it will be processed by browsers just as if it were in the syntactically correct place, i.e. inside the head element. It even works “backwards”, effecting elements appearing before it.

You can even make this approach – which should be used only if you cannot change the head – formally correct as per HTML5 CR. It allows a style element at the start of any element with flow content as its content model. Current browsers ignore the scoped attribute.

Update: the following is not relevant any more, since the validator bug has been fixed.

However, there is a bug in the W3C Markup Validator and in validator.nu: they disallow style at the start of body. To overcome this bug, and to make your document validate in addition to being valid, you can use an extra div element:

<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>

Solution 3

No, not that I know of. You will need to declare this kinds of things on a <style> block or an external CSS file.

Though if you want something like this, it's very probable you're doing it wrong.

88,884

Author by

Randomize

Just a random developer that does NOT believe in software development and people

Updated on July 09, 2022

Comments

Randomize almost 2 years
Is it possible to load an external font via inline CSS?

Note: I'm not talking about using an external CSS file with a @font-face definition, but rather something like the following:
```
<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>
```