Free Open Source Fonts In A Website
After recently installing open source fonts on fossfolks, I got to thinking that maybe others might like to know how to do it.
December 8, 2017
Until recently, I’ve never declared a specific font on one of my websites. I’ve always gone with declaring just sans or mono. The I let the visitor’s browser use whatever their operating system’s default sans/mono font was. Then last month I heard about IBM releasing their Plex font to the world. I decided to implement free open source fonts here at FossFolks.
So, what if you like Plex, or some other open source font? How do you install on your website so that visitors to your site use it? Well, read on…
Grab the free open source fonts
There are a few sites where you can grab, but Font Library ought to have at least something you’ll like. On FossFolks, I grabbed the Plex font and unzipped it into a directory in my public_html directory on the web server. Grabbing something like Carlito over on FontLibrary, you’d do the same thing. Just make a fonts directory in the top level of your web server’s html directory, and throw those .ttf files in there.
Put free open source fonts into your style sheet
Then you’ve got to refer to those font files in your css style sheet. In WordPress, you’ve got to edit your theme. Go to the Appearance menu and pick editor, and you should by default get dumped into editing your style.css file. On another kind of website (straight up html or a php) look in the html <head> section, and find the <style type=”text/css”> line to see what your stylesheet is called.
In said stylesheet, you’re going to need to declare a font face. Then specify a font in the body section (or a particular div if you’re using different fonts in different places on your site) like this:
@font-face {
font-family: IBMPlexSans;
src: url(/fonts/Sans/IBMPlexSans-Regular-Latin1.woff);
}
body { font-family: IBMPlexSans;font-size:.9em; color: #000; background-color:#36140e;line-height:1em;}
I’ve made the pertinent parts bold for you. That should be all there is to it. If you run into trouble, give a holler.
Next Previous
Leave a Reply