hpr-knowledge-base/hpr_transcripts/hpr1616.txt

Episode: 1616
Title: HPR1616: Howto Use Webfonts
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr1616/hpr1616.mp3
Transcribed: 2025-10-18 05:52:28

---

It's Monday 13th October 2014.
This is an HBR episode 1,616 entitled How to Use Web Fonts.
It is hosted by Klaatu and is about 21 minutes long.
Feedback can be sent to Klaatu at HakaPublicRadio.org or by leaving a comment on this episode.
The summary is Klaatu reveals the secret of Web Fonts without using Google.
This episode of HBR is brought to you by an Honesthost.com.
Get 15% discount on all shared hosting with the offer code HBR15.
That's HBR15.
Better web hosting that's Honest and Fair at An Honesthost.com.
Hi everyone, this is HackerPublicRadio.
My name is Klaatu.
Today I've got a couple of web tips for you.
I've been surprised lately at just how many people don't know about Web Fonts or
rather don't know how to use Web Fonts.
A lot of people lately, for a while there were no such thing as Web Fonts, right?
For a very long time, you had five fonts on the internet that you could use and that
sort of magical quintet of Microsoft fonts, I think, maybe one Adobe one snuck in there
or something.
That was it.
That's what people got.
It was anybody's guess as to whether or not you could actually even expect your users
to see those fonts because if they were on one system and you were on another, then even
though you may be specifying one font, they might not actually have that font.
For a very long time, I would say for most of the web's existence up to this point,
there was no sense of fancy fonts online.
That led, of course, as these things do to a lot of horrible, horrible workarounds, people
doing things like writing out their fancy title and then exporting it as a PNG and then
putting it just as an image at the top of their page.
That's just kind of sad.
Most people don't know how to index at PNG.
It was also quite a lot larger in file size than necessary, so that's silly.
The worst of all, I guess, is that the fact that that's not readable by anyone, by computers
or screen readers or anything like that, if it's just a graphic, that's not something
that's really a valid piece of information for a text-based area like the internet has
been.
At some point, I remember, and I'm talking very, very recently here, there were some sites
that literally required flash to, they would supposedly helpfully render your fonts, but
it was like a flash plugin which to me is way up there on pointless uses of flash and
believe me, that is a pretty big list anyway.
But yeah, that was a silly one, and then around the same time that I'd heard of that, Google
came out with what largely is being seen or has been seen as kind of a game changer for
fonts on the web, and that is Google Fonts, and it was this easy, really slick, exciting
way.
You could go to this magical land called Google.com slash fonts, and you could just pick,
it was like a store, it was like a font store, and you could just pick free fonts, and you
could put them in your briefcase or something, and they would give you the snippet of code,
and you copy and paste that code into your header of the page or the web page, and that
does it, that works, it brings in this font.
The really unusual thing about this idea is that it is importing fonts from Google, and
I'm still waiting for that one person out there to come up with a way to exploit that, but
it's just kind of this idea of like, I mean, just for a font, you're just bringing in a font
file from a Google server somewhere, which I mean, that's fine, and nothing against Google
or anything, I say, sarcastically, but I mean, that is fine, it's totally fine, but why
bother?
It just seems like sort of overkill, because there's this rule in CSS called at font face,
that's at the at symbol font-face.
There are a couple of different, I don't really know what they're called, to be honest,
they're the at symbol rules, and they're almost, I think of them as macros, if you will,
like an RPM macro or something, and there's a couple that I know of, and the two that I've
actually used are at import and at font face, so at import, which you may or may not have
used, is to import the contents of another style sheet, it's kind of like an include.
So if you do an at import and then the path to some style sheet, then you're saying, okay,
webpage use the style sheet that I'm giving you right now, and also insert all the stuff
from this other style sheet as well, and then you get both style sheets for the price
of one, and that's kind of useful, really.
So the at font-face rule allows you to define your own custom font names and font paths,
so for instance, let's say that you've got a web server, it could be your own physical
web server, it could be a shared host, it could be a VPS account, doesn't really matter,
a dedicated account, doesn't matter, it could be any of these things, as long as you've
got access to it, you can do this trick.
So the first thing that you need to do is get a font onto your server, so you should
look through a bunch of fonts, find the one that you like, make sure that they're free
to use and redistribute and all that other good stuff, and upload it just as you would
any other file like an HTML file or CSS file, whatever, PNG, whatever, upload it to your
server.
Ideally, I imagine you would probably want to put it in a fonts directory of some sort,
just to state organized.
Of course, you can find lots and lots of different fonts, there's the League of Moveable
Type, you can get fonts there, a lot of times with Fedora and Ubuntu, both of those distributions,
really, they have a pretty good set of free fonts that you can grab.
I think in Fedora, there's a group, a young group that you can install for just a bunch
of fonts.
So I think maybe the design one has even more fonts or something like that.
Like being there are free fonts out there, and if you go to slackermedia.info, you can
also find free fonts there in the Great Linux Multimedia Sprint Volume 1.
There's like 2,000 fonts or something absurd like that.
You can get all the fonts you'll ever need from there, and they're all free.
So you download those and you find one, you muddle through all these different fonts, and
you upload it to your web server, put it in a directory, maybe called fonts.
I would also give it a very friendly name, i.e., don't have spaces in the name, don't
have exclamation points and slashes and dashes in the name.
Just make it something simple.
Let's just go with typoslablight.ttf, that's an actual font, I think.
I could be getting the name wrong, but let's pretend like it's a real font.
So if we upload typoslablight.ttf to our web server, put it in our fonts directory, then
in our CSS file, whether it's called style.css or stylesheet.css, whatever we call it, open
up your CSS thing, and type in at font-face, and then curly brace, font-family, colon,
quote, fancy font, close quote, semicolon, and then source as an src, just src colon, url
parentheses or brace, whatever you call it, it's the rounded one, quote.slash fonts, or
maybe dot.slash fonts, we'll get to that in a minute, slash typoslablight.ttf, close quote,
parentheses, close semicolon, and then close the curly brace.
You've just created a font rule for your CSS, for that CSS style sheet.
What you have done is you have defined an arbitrary name, I call it fancy font, so font-family
colon, fancy font, that means that whenever I say fancy font in the rest of my style sheet,
it's going to substitute whatever the source of this font is, and of course the next
line is the source of the font, and the source is url, and that url is pointing to the
fonts folder, and then the name of the font.
The fonts folder could be in a couple of different places, it really depends on you, and it depends
on how you organize your website.
The real professionals from what I've seen tend to organize all their CSS in a folder
called CSS, and all their fonts in a folder called fonts.
I've tried to get in that to have it myself, so maybe you should too, I don't know however
you feel about it, but if that's the case, then I would do, you know, if my style sheet
is in a directory called CSS, then it would be a dot dot slash fonts, right, because I
have to go back out of my CSS folder and into the fonts folder, and then find typoslablight.tdf.
If the CSS style sheet is just lying out there on my website, no, my web server, and there's
a fonts directory right next to it, then it would just be a dot slash fonts slash light
slab typo light slab dot ttf.
That's just basic Linux POSIX paths, so if you don't know, if you don't know the difference
we dot dot dot and a dot, just go look up like sort of how to navigate in the terminal
and you'll figure it out.
Okay, so the font name again, or the font family is again, to completely arbitrary.
I call mine like the one that the main font of that project I call it, fancy font, and
then sometimes there's another one, maybe I'll call that like monofond or code font, something
like that.
That's usually for stuff that I'm typing in the terminal examples and stuff like that.
It's entirely up to you, again, try to make them easy to remember and easy to type.
I don't use spaces, don't try to do fancy capitalization schemes, just make it simple
for yourself.
It's hard enough to do CSS and target the correct element and use all the different selectors.
The thing you don't want to have to think about is what you called your stupid font, so
just make it something simple.
Now of course, when you are actually going to use that font, you can do things like, let's
say you want your fancy font to show up in your H1s, so you would just make a rule for
that and it would be H1 curly brace font dash family colon, quote, fancy font, close,
semicolon, close, curly brace.
And now if you refresh your index.hml or whatever, H1 will transform right before your
very eyes into the font that you have saved into that font folder.
That's it.
It's that easy.
And the nice thing about the solution is that it's self-contained, so you don't have
to rely on that font always being on Google Font for the rest of eternity.
The font exists right there with the rest of your project.
You don't have to make any outside calls to get your font, which again just seems bizarre
to me.
It seems really overkill to have to go out to Google to get your little font file and
then to come back to your website.
I mean, Google even gives you, when you go to the Google Font thing, it gives you like
an estimate of like, hey, if you use this font, it will only slow your website down by
this much.
And it's only milliseconds, it's the modern web, it's not that big of a deal.
But it is kind of nice to be able to just download a font and then put it on your server.
And just again, just kind of make everything self-contained.
I think ideally for archival purposes and just sort of self-contained, container-ness,
I think that's kind of a nice solution to be able to just have everything right there
together.
Archive at all is preserved forever.
So that's how you use web fonts.
It's not hard.
It's actually quite easy.
Have a great time with it.
If it's not working and it won't work at some point, you know, something's going to
go wrong.
There's a couple of things to check.
The first thing I do is I check whether I'm targeting my CSS correctly.
So if the H1 didn't go to my fancy font, my slab league type.tdf, then am I actually targeting
my H1?
Am I sure that that's correct?
Maybe it's wrong.
I mean, probably if it was H1, I would, I mean, that's a pretty broad rule.
But let's pretend like it was, you know, some div, H1, and then the fancy font.
So make sure that that's correct.
So you know, just put an arbitrary rule in there, like color, colon, red, semi-colon,
and see if your H1 turns red.
If it did turn red, then you know, okay, you are targeting the correct thing.
You just did something wrong with your font.
So the next thing that I do, and I always get this wrong, is it's just a stupid typo
in the name of the font.
Even though it's just fancy font, which is about as simple as you can get, I always, there's
always a typo.
The first time it's, it's always, you know, fancy font or something like that.
And it's like, oops, forgot the Y, add the Y, and there suddenly it works.
It was a dumb mistake.
And that's one of those things that you're going to look at, and you're going to look
at, and you're going to look at five times, and you're going to not notice that there's,
you know, that you dropped Y or whatever, and then finally you're going to realize, oh,
I did drop that Y, I need to add that in there, and then it'll work, and you'll feel like
an idiot.
It happens to me all the time.
The other thing to check, if you're, if you've targeted correctly, the name of the font
is correct, make sure that your path is correct, dot slash font slash slab typo light dot
ttf, you know, you're sure that that's right.
I mean, maybe what, are you, look at your servers, make sure that that's where your font
is stored, is that where it is?
Or do you know your Linux paths well enough to be sure that it's just a dot slash, or should
it be a dot dot slash, or should it be a dot dot slash web stuff slash fonts slash slab
typo light dot tdf.
So make sure that you've got all your different paths correct, because again, that's kind
of one of those stupid mistakes that one does tend to make in the heat of the moment.
And then finally, last but not least, check the file itself.
Make sure that you've named that file, what you think you named it.
I've done that too, because I get fonts from all over the place sometimes, and I will
rename them so that they're simpler to type.
And then in so doing, I screw it up.
I call it, you know, slab typo light with a capital L for no reason dot ttf.
And then in my CSS, I do it slab type, light with a lowercase L dot ttf.
Again, a stupid mistake, and it's just kind of something that, that the more you practice,
the less you will be prone to doing those things.
So that would be the last thing that I can think to check.
Now, if it still doesn't work, if you try all that stuff and it's just not working, and
you're sure you've gotten all the spellings in the paths and all that other stuff right,
then maybe just try a different font, because I mean, it could, in theory, you could have
gotten like the one font file out there that just for some reason isn't, you know, it can't
be parsed by a web server for some reason.
I can't really think of a reason, but let's just say it could be, and maybe that's it.
So try it with another font, just do a sanity check and see if that works.
Now, for me, since I usually work only on my own sites, or if I'm working on someone
else's site, it ends up frequently using a lot of my assets, I have kind of a set standard
set of fonts that I frequently use, and I just kind of carry that folder from server to
server.
And so they're everywhere, and I tend to kind of just fall into like, oh, this is my
set of fonts, and it becomes, again, you become less prone to all the mistakes that way.
But I mean, if you're working on a bunch of different sites, obviously that's not something
that you're probably going to have a luxury to do, you're probably going to have to have
the client figure out which font you want to use and then go with them, depending on
what they've picked out.
But those would be the things, you know, for troubleshooting, that's what you want to
do.
So I do hope that has been informative, thank you very much for listening, and I will
talk to you next time.
You've been listening to HackerPublicRadio at HackerPublicRadio.org.
We are a community podcast network that releases shows every weekday, Monday through Friday.
Today's show, like all our shows, was contributed by an HBR listener like yourself.
If you ever thought of recording a podcast, then click on our contributing to find out
how easy it really is.
HackerPublicRadio was founded by the digital dog pound and the Infonomicon Computer Club,
and is part of the binary revolution at binrev.com.
If you have comments on today's show, please email the host directly, leave a comment on
the website or record a follow-up episode yourself.
Unless otherwise status, today's show is released under Creative Commons, Attribution,
ShareLife, 3.0 license.