61

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>

4 Answers 4

45

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.

4
  • 4
    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, 2017 at 10:49
  • 2
    this is still just a inline style tag not inline css like his example <h1 style="...">
    – OZZIE
    Jul 5, 2019 at 12:30
  • Can the base64 encoded font(s) be dropped into a <style> tag anywhere, or just in the header?
    – stevec
    May 1, 2020 at 4:45
  • 1
    Great option! I ended up using transfonter.org Feb 18, 2021 at 4:21
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>
5
  • 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)? Oct 31, 2014 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. Nov 1, 2014 at 6:41
  • Ok, Thank you, currently, I'm in a case<style scoped></style> and<style></style> is striped from the web sanitizer, but I can put anything inside astyle="" attribute. Also, would it work if I use a@importinside a style attribute? Nov 1, 2014 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. Nov 1, 2014 at 12:38
  • This does not work for me - errors at runtime.
    – John Foll
    Nov 9 at 0:40
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.

7
  • 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? Oct 31, 2014 at 22:13
  • @user2284570 MediaWiki allows you to define a custom CSS file IIRC. I haven't used it in a very long time. Oct 31, 2014 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. Oct 31, 2014 at 22:17
  • @user2284570 In that case you are most definitely doing something wrong. Oct 31, 2014 at 22:17
  • 1
    Maybe not :-) Oct 31, 2014 at 22:19
-6

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.

1
  • 5
    It's kinda the point to do the declaration inside of the style= attribute ;) Jan 5, 2012 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.