Tessisamess

How to use ANY font in your layouts!

Whether you're creating your own layout or editing one you've gotten from someone else, there's been a longstanding desire... just one little thing we've all wanted to be able to do: Use our own fonts in the design.

When I started coding I would have told you one thing: You can't—at least not on journalling sites. And it was true back then! But the great thing about the web and the languages we use to program and design the digital world around us is that it's always changing. What was true about the limits of design in CSS ten years ago isn't true now—even going back five years the rules have changed a lot!

The point is, design and programming languages are ever-evolving, and you're probably waiting for me to just shut up and teach you how to do this because you've no doubt seen some custom fonts floating around on IJ and you have a burning need to be able to do it for yourself too, so let's get going!

Step One

Pick your font! This is the fun part. Pick any font you like, from any site you like. If you don't know where to go, Dafont is always a great place to get the fonts you need. The best part? Since your journal is for personal use, you don't have to worry about licensing if the font is listed as free by default.

Just be sure to check the glyph support on the font (generally right on the font site's preview), because sometimes the freeware version of a font will disable vital glyphs. Usually those glyphs are seldom-used characters, but some fonts will have numbers and punctuation disabled, and if you use this font for the subject line of entries or the headings tags you'll be in for some ugly font mish mashing later on. If you're only using the font for your journal title you should be fine with any font you pick

Step Two

You've got your font; it's the perfect one for your journal and you couldn't be happier that you get to actually use it on IJ. But wait... is your font in .otf format? It is? Great! Skip this step.

It's not? Don't worry, we can fix that. Usually if a font isn't an .otf, it's a .ttf (sometimes a .woff) so we just need to covert our .ttf or .woff into an .otf!

Step Three

So you've got your .otf all ready to go and sitting on your computer, but... what now? What magical step are we missing that suddenly makes this font work when self-hosting it has never worked before?

Dropbox. Yeah, you heard me. All the pain and tears are solved by Dropbox. Make an account or, if you already have one, go ahead and upload your .otf file. Once that's done create a share link and copy it. We're almost there, guys!

Step Four

So you created and nabbed your share link, right? And if you got a little overexcited and tried it you probably know it didn't work. That's okay! You just need two tiny changes:

https://www.dropbox.com/s/randomstring/filename.otf?dl=0

Changes to:
https://dl.dropbox.com/s/randomstring/filename.otf

Step Five

Put your font into your layout's CSS with @font-face and implement it as you would any other font!

@font-face{font-family:FONTNAME;src:url(DROPBOXURL);}

So from here it's as easy as h1{font-family:FONTNAME,fallback fonts here;}

Note that FONTNAME can be anything you want it to be, so if you have a long font name you can change it to myfont or whatever you like to make it easy to remember; it just needs to know what to call itself when it's connecting the font's URL to the places you specify the font.

♡ You're Done! ♡