Loading an external font via inline CSS

Question

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>

vhs · Accepted Answer · 2023-01-16T20:30:03.903

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.

This is very interesting! My question is old back to 5 years ago and things are bit changed since then :) I am not able to verify it right now, but I am going to assume it as the "solution" so far. — Randomize, Apr 18 '17 at 10:49
this is still just a inline style tag not inline css like his example `
` — OZZIE, Jul 05 '19 at 12:30

score 12 · Answer 2 · edited Feb 19 '20 at 13:51

12

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>

edited Feb 19 '20 at 13:51

Steven

93
8

answered Mar 10 '13 at 08:56

Jukka K. Korpela

195,524
37
270
390

Can you link the relevant part of the HTML 4.01 specification which forbid this *(I'd like to know what other kind of inlined css is disallowed)*? – user2284570 Oct 31 '14 at 22:12
2

@user2284570, I added a clarification that refers to `style` elements, which can be called “inline CSS” in the broader sense that CSS code directly appears in an HTML document, instead of being in a separate CSS document that is just referred to in HTML. The HTML 4.01 rule that disallowed `style` inside `body` has no single location in the spec, since it follows from the *absence* of the `style` element from any content model except that of the `head` element. – Jukka K. Korpela Nov 01 '14 at 06:41
Ok, Thank you, currently, I'm in a case`` and`` is striped from the web sanitizer, but I can put anything inside a`style=""` attribute. Also, would it work if I use a`@import`inside a style attribute? – user2284570 Nov 01 '14 at 11:25
@user2284570, no, `@import` does not work inside a `style` attribute. The `style` attribute value can only consist of declarations (*name*: *value*), which will be applied to the current element. – Jukka K. Korpela Nov 01 '14 at 12:38

score 2 · Answer 3 · answered Jan 05 '12 at 20:27

2

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.

answered Jan 05 '12 at 20:27

Madara's Ghost

172,118
50
264
308

2

`Though if you want something like this, it's very probable you're doing it wrong.`: What about embedding a font on a single mediawiki page? – user2284570 Oct 31 '14 at 22:13
@user2284570 MediaWiki allows you to define a custom CSS file IIRC. I haven't used it in a very long time. – Madara's Ghost Oct 31 '14 at 22:14
2

Yes, but they allow it only for the whole site. If you have a single page which require a 6Mb font, then it will be loaded in all the page of the site. – user2284570 Oct 31 '14 at 22:17
@user2284570 In that case you are most definitely doing *something* wrong. – Madara's Ghost Oct 31 '14 at 22:17
1

[Maybe not](https://en.wikipedia.org/wiki/Miscellaneous_Symbols_and_Pictographs) :-) – user2284570 Oct 31 '14 at 22:19
6mb font O.o are you loading the entire google font lib? – Patsy Issa Oct 31 '14 at 22:19
@PatsyIssa : No, but elaborate glyphs require a lot of data *(There are several different word maps on the page)* – user2284570 Oct 31 '14 at 22:21

score -6 · Answer 4 · edited May 11 '19 at 07:56

If you use @font-face, you should be able to do something like this:

CSS

@font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/raleway_thin-webfont.woff') format('woff'),
     url('fonts/raleway_thin-webfont.ttf') format('truetype'),
     url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;

}

Make sure to include the fonts - the above example has placed all of the fonts in a relative-path directory to the css file.

HTML

<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">

You should be able to find free web-based @font-face fonts here.

It's kinda the point to do the declaration inside of the `style=` attribute ;) — Madara's Ghost, Jan 05 '12 at 20:51

Loading an external font via inline CSS

4 Answers4

`

Linked

Related