Have you ever wondered how you can step up your web design game?
I recently started self-hosting web fonts because clients of mine were requesting that I use special fonts on their websites that they had downloaded for free from the web. I had previously stuck to using common fonts or Google Web Fonts. However, now I have been using more and more special fonts from sites like DaFont and Urban Fonts. There are many other free font sites, but those are just a couple.
Converting Your .ttf Font File to the File Types Needed to Host as a Web Font
Once you have selected your font and downloaded the .ttf font file, go to this Online Font Converter and select the following font file extensions:
Then click on “Select Fonts” and either choose the file or drop your .ttf font file into the box.
Once you had added the file, click “Done”:
Click “Save Your Font”:
Click “Download Attachment”
The zip file will download. Extract this zip file and you should see the following file extensions: eot, svg, ttf, and woff.
Writing the CSS to Self Host Your Font Files
These files will need to be dropped into the same folder as your CSS. You can put them in a separate folder as long as you add that directory to the urls in your CSS.
Once that is done, you can simply add the following @font-face rule to your CSS file.
src: url('Antipasto.eot?#iefix') format('embedded-opentype'),
To use this font, simply use
font-family: "Antipasto" in your CSS.