Tessisamess

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!
Apr. 5th, 2018 02:42 am (UTC)
I have a question! I love playing around with fonts and I tried to follow your instructions but when I downloaded the font from dafont, it had PERSONALUSEONLY in front of the .ttf extension. I tried to convert it to .otf using the converter link but it wouldn't convert. I thought it might be because of the extra phrase and I tried renaming it but it still didn't work. Any suggestions as to what I might have done wrong?
Apr. 5th, 2018 03:52 pm (UTC)
That is SUPER weird. If you remembered to tick off the slider that says you have permission to use it (which, since it's for a personal journal, you absolutely do) then it should be working. Sometimes a font will exceed the size limit and it won't work because of that; did you get a specific error message or did it just randomly decide not to work?

I could try it out myself if you want to link me the font you tried using!
Apr. 5th, 2018 04:56 pm (UTC)
https://www.dafont.com/sunflowers.font

This is the one and I did make sure I hd the slider set to yes. Would having an ad blocker make a difference? I also tried turning it off but it made no difference.
Apr. 5th, 2018 05:54 pm (UTC)
Hmmm. It may just be the font itself. I tried it on about four various TTF to OTF converters and every one failed. That sucks :\ it's such a pretty font. At this point I'd suggest going through the handwritten script section and trying to find something similar; here's a link to that with "Sunflowers" set for the preview text so you can try and find a close match that you like! At a glance, Bromello and Italian Breakfast look like nice alternatives!
Apr. 5th, 2018 10:16 pm (UTC)
I found a few that were already otf so I'm going to try using one of those. I think my biggest problem is going to be finding exctly what part of the code I need to change if I just want to change the header font and not the text in the entries.
Apr. 6th, 2018 04:16 am (UTC)
Which layout is it? I can find the ID to target! If it's S2 Complete it's most likely going to be #banner-header (as shown here) but sometimes that varies if the header is faked through a different element.
Apr. 6th, 2018 09:55 pm (UTC)
It was Heartbreaker!
Apr. 6th, 2018 09:59 pm (UTC)
Awesome, yep! If you change the font style in #banner-header{font-family:Poppins,sans-serif;text-align:left;margin:0;font-size:60px;} it will only change the header title and nothing else! Just remember to add text-transform:none; or text-transform:lowercase; if you want to revert the headings all being uppercase for your new font!
Apr. 6th, 2018 10:41 pm (UTC)
Thanks!
Apr. 6th, 2018 11:05 pm (UTC)
http://sandstorm.insanejournal.com/

Did it! I decided the script didn't look right so I went with this one.
Apr. 6th, 2018 11:07 pm (UTC)
Ohhh, that looks gorgeous with that header image!
Apr. 6th, 2018 11:08 pm (UTC)
Thanks! It's called Timeless.