tutorial: using google webfonts and s2

[terra]

So, Google runs a nifty resource called Google Web Fonts! It puts hundreds of open source fonts for download and also generates CSS automatically to use on your website.

I'm going to explain how you can incorporate it into your DW/LJ CSS overrides. I'm going to be taking my Central layout and changing the header font to this.

Selecting your font

The font we're going to be using for this tutorial is UnifrakturMaguntia, which is based on a 1901 typeface by Carl Albert Fahrenwaldt! To find it, just copy paste the name into the search box on the Google Fonts page. Click add to collection. Then, scroll down, and click use in the blue bar on the bottom of the page. Google changed their layout, and now seems to store your selections in a dark grey bar at the bottom of the page.

Google will generate this code for you:

<link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>

Implementing your font

It's the stuff inside the href='' tag that we want to copy and paste into the Custom CSS section of the journal menu. You want to place the http://fonts.googleapis.com/css?family=UnifrakturMaguntia into the Custom stylesheet URL field. It should look like this:

Using your font in your stylesheet

The next step is putting the font into your CSS! Google generates that part, too, if you scroll down a but further.

font-family: 'UnifrakturMaguntia', cursive;

You have to find the place in the CSS where you want to use your fancy font! I want to apply it to my h1 tag, so I found the h1 style and inserted it.

#header h1#title {
color: #414141;
font-size: 4em;
text-shadow: 1px 1px 1px #ccc;
font-weight: normal;
letter-spacing: 0;
margin: 0;
font-family: 'UnifrakturMaguntia', cursive;
padding: 0;
text-align: center; }

You can use the same steps to use any font in the database. Paste the URL google generates into the Custom stylesheet URL, then use the font like normal!

N.B., this won't work in older versions of Internet Explorer, so it's good to include alternatives in your font-stack.

Comments

[ironjill]

This is wonderful, thank you!

[rikayla]

this is awesome. mem-ed!

[cyberpink]

This is great, thank you for take the time to write this out!