Using custom fonts in your Livejournal

[schnee]

So, you'd like to use custom fonts in your Livejournal. How do you do that?

Web typography has a long history, but in this day and age, you'll want to use CSS, specifically the CSS3 Fonts module. You'll need two things:

1. A file containing the font, in a format that browsers can consume: TTF, OTF, WOFF or SVG.
2. A @font-face declaration somewhere in your journal's stylesheet.

For the first, upload the font file somewhere (make sure it's legal for you to use this way, BTW). Scrapbook unfortunately does not accept font files, so you'll have to use your own hosting.

For the second, edit your journal style's custom CSS to include a declaration along the lines of the following:

@font-face {
font-family: example;
src: url(http://example.com/fonts/example.woff) format("woff");
}

You may need a paid/permanent account on LJ for this, BTW; if you cannot include custom CSS in your style this way, you're hosed.

You will now find that your font still isn't working: it's not actually showing up. Why is that? The answer is cross-origin resource sharing (CORS); you'll have to instruct your webserver to include a header indicating that your journal is allowed to make use of this font.

For sites running on Apache, you can add the following to a .htaccess file:

AddType application/x-font-ttf .ttf

SetEnvIf Origin "^http(s)?://(example|www\.)?(livejournal\.com)$" origin_is=$0
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is


(This is partially based on advice found on Stackoverflow, BTW.) You could also unconditionally set the Access-Control-Allow-Origin header to * to allow any site to use these fonts, of course.

Once all this is done and in place, you should be all set: you can now apply fonts to your heart's content, either by including further rules in your custom CSS to style specific elements, or by directly applying the new font, e.g. by writing "..." or so.

EDIT, 2014-10-31: You may think that you can get around CORS restrictions by using a data URI for your new @font-face's src, BTW, but Livejournal considers those suspect and will not serve any of your custom CSS at all if you include them.