Previous | Next

Using Custom Fonts in Layouts




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! ♡

Tags:

Comments

Sep. 5th, 2017 05:38 am (UTC)
Thank you for this! The right font is so crucial to the look of a layout. It really sets the whole mood.
Sep. 5th, 2017 04:14 pm (UTC)
You're welcome, and I agree!! I'm such a font nerd lmao. I wish I could use non-Google fonts in my free layouts, but since I have to host them on my dropbox I'd hate to accidentally delete something in a year and break a bunch of journals LOL.

(However, this month's free layouts may or may not demo this tutorial WINK WONK.)
Sep. 5th, 2017 09:18 pm (UTC)
Ahh! I've never thought this was possible. So cool! Thanks for the tutorial.
Sep. 5th, 2017 09:48 pm (UTC)
Yeah, same! Back when I started coding for journal sites I don't think it was, or at least no one had thought to try this way, because Dropbox wasn't around until 2007, so most of us were like, "Well, the usual way doesn't work, so that's that."

Somewhere down the line someone must have thought to try doing it, and honestly... I can't believe I didn't until I saw it floating around IJ because I've used Dropbox to host music for IJ before. It was a lightbulb/facepalm moment for sure lmao.
Oct. 1st, 2017 10:13 pm (UTC)
I am so happy about this post. I've wanted to do it for forever, but not been quite certain how to make it happen. Bookmarking for later, cause I know I'm going to use it thank you!