Playing with Web Fonts

Last week at HacKSU we played around with creating/importing new web fonts and then played with some fun effects. We used two different methods of getting new fonts: we downloaded one from dafont.com and we got another from Google Fonts. Here’s how:

Step 1: Get the Fonts

Method 1: dafont.com

(or another font downloading site)

• Go to http://dafont.com. It looks like this:

• Next, find a font you like. I chose Curse of the Zombie. Then click- Download, like I have selected.
• You’ll get a folder probably called Curse of the Zombie, or whatever your font was called with either one or more of the following kind of files: .ttf, .woff, .woff2, .svg, .eot. Any of these should work. If you have something else, try it, or get a new font.
• Take the file from the folder and put it in your project folder, where your index.html and style.css files live. For example:

Then see the code below in Step 2 to continue.

Method 2: Google Fonts

• Go to http://www.google.com/fonts. It will look like this:

• Then find a font you like (I chose Handlee) and press Add to Collection.

• Then in the top, right hand corner of your Collection box, press Use. Then scroll down until you see the following. The instructions are pretty self-explanatory, but there is also an example of this in the next step.

Step 2: The Code

Note: If you’re downloading other fonts you may have to play with the values of line-height and margin-top, etc to get the positioning just right for your font.

Step 3: See the output.

As always, if you find any errors or have any corrections, let us know at hacksu@cs.kent.edu.