CODEX
Getting Fancy with the Fonts
In preparation for a JavaScript project I was shown the amazing world of Google Web Fonts!
I love typography!
I spent some time exploring before I narrowed down my options. But, when it came time to implement it in the CSS file things didn’t go as smoothly.
Maybe I picked one of the few typefaces that just wasn’t going to work in this scenario. Maybe I’m missing something.
Since this was all new to me at the time and I was under a time crunch to reach a deadline, I decided to just stick with Apple Chancery and Georgia and carry on with the project.
Lists of Web Safe Fonts
More Fonts
Well, this can’t go on forever so I’m going to get to the bottom of it right here, right now.
Google Web Fonts
There are fonts out there that you can purchase a license for but Google Fonts are free and open source. Hurray!
At the time of this writing, there are 1,043 font families to choose from.
Narrow the choices down by category (Serif, Sans Serif, Display, Handwriting, Monospace), language and font properties (# of styles, thickness, slant, width).
By default, it will display examples of each font in a sentence form. Additionally, you can view a sample paragraph form as well as type in a custom set of text to see specifically how it displays. Or, view the whole alphabet or set of numerals.
Select A Font(s)
Find a font and select it. You’ll be brought to a new page where you can view the multiple styles (if it has more than one) and glyphs.
For each style you want, select the ‘+ Select this style’.
NOTE: If you want to use multiple google font families/styles just keep adding them before exporting the link. At the end, all the fonts will be compiled into 1 handy link.
To review and remove fonts or styles, select the box in the top right corner with a red dot above it.
Link To Embed A Font
When everything you need is selected, click on that box in the top right corner and give it a final review.
Copy the whole link tag and paste it in the <head> tag of your html file.
And maybe copy the ‘CSS rules to specify families’ and keep it in your notes so you can add it the CSS file.
So dang easy. I’m not sure where I went wrong last time.
I might’ve selected the ‘Download family’ button, which is right under the square button with the red dot, and that gives you a .ttf file (True Type Font) to include in your project directory. Maybe I’ll explore that another time.
