I can't be the only one who's thought that the built-in fonts are nice but might not work for a given application. In this case, I was workign to create a grunge, hand-sketched sort of look. I needed a typewriter font.
With a bit of googling I found an appropriate opensource font with valid licensing terms.
Now, let me stop here a moment and go over that... with valid licensing terms. Specifically, that means you must be licensed to use the font on a server not simply your desktop!
Now, let's assume you are clean on licensing. In my case the license simply stated that I couldn't sell the font so I'm good to go. But the next problem was getting the truetype font on my system into some sort of usable format for the web. This is known as a webfont and despair not because fontsquirrel has the answer for you. There, you can upload a font or fonts and generate a webfont kit all set to go... almost.
- Go to fontsquirrel and generate your font.
You can leave all the options at default. When you're done, download the font zip file.
- Create a fonts directory in the root of your HTML space.
For siteground that looks something like: public_html/fonts
- Upload the zip file to that directory and extract it.
- Edit the generated font family names
This is the step that got me. Themler called my font "Veteran Typewriter". Fontsquirrel called it "veteran_typewriter". Yup, so no dice on any font loading. I used the chrome console to inspect the element and find exaclty what themler called it. Then I edited the stylesheet.css file to make the accordingly.
In Themler:
The edited stylesheet.css:
- The last step is to link that stylesheet into your web site.
There are several ways to do this but how I did it was by going into the themler settings and adding the link statement into "Additional Head HTML".
The link statement I hear you say? Take a look at the directory in which you extracted the fonts. You'll find a <fontname>-demo.html file. Go ahead and view that in your browser. It not only shows you your font but also how to install them. Take a look at the 4th tab over and you'll find the link statement conveniently written there for you.
Enjoy.
