So you want more fonts for your site? Or perhaps a little variation for your graphic design? FontSquirrel’s the place. It’s one of the simplest ways to get fonts that are made completely by the community. From handwritten to mono, this site’s got you covered. To start, just go to FontSquirrel’s site.
When you get there, you can search for a font in the search bar.
For this example, I’m gonna search for Source Sans Pro, one of the better fonts on the site, made by Adobe (occasionally, some corporate companies make a font). I hit the search icon, and bam. The font I’m looking for shows up instantly.
Under “Search results for ‘source sans pro'”, you can see a preview of each result. In that gray bar under, it shows the name, “Source Sans Pro”, the maker, “Adobe”, and how many variants the font “Source Sans” has. When you look to the right at the blue button, you see the button, “DOWNLOAD OTF”. OTF is “OpenType format”. If you see one showing TTF, that’s “TrueType format”. Both of these are just as good (unless you go into the deep web of font creation). When you hit that button, it shows you the download pop-up for the font. It’s always in a .zip folder, which usually includes “license.txt” (which you should look at before you use a font), and the font file.
When you have your font installed, you can go to your Downloads folder (or whatever you use), right-click the .zip, and click “Extract all…”. It doesn’t matter where you extract it to. Then go into the extracted file, right-click on the .OTF or .TTF, and click “Install font”. When you’ve done that, the font should be on your computer. To test, go to your photo editor and try using that font. When you’ve tested it all, you can continue to using it in your pages. To make sure it works on a computer that doesn’t have it installed, do this.
- Add your font file to your webpage’s folder.
- In your stylesheet, add the following code (italics indicates a placeholder.): @font-face { font-family: “myfont“; src: url(‘font_filename.ttf_or_otf‘); } element_I_want_with_this_font, other_element { font-family: “myfont“; }
After you’ve done this, load your site and check it out. If it doesn’t work, you can try re-reading this post, or going to one of the following resources:
Share this post on social networks:
The HTML Dude 