What if I told you that the red and green title design down below was made up simply by fonts I have loaded on Geek with Style, and a bit of CSS styling? Kinda neat, eh? Like virtually everything in website design, there are both pros and cons to using designer webfonts instead of images. One or the other could take up more loading time depending on webfont size versus image size. But, while we’re told to not go too crazy on loading fonts directly from our site, we also don’t want image heavy pages, especially with our audience becoming more and more mobile. Many of our viewers are using limited data plans, and it sucks when 10 MBs of data is used to simply view one image on my browser.

 

Let Me Be Your Holiday Gifts Guide

<center><h1 id=”bodieholly”>Let Me Be Your Holiday Gifts Guide</h1></center>

No really, that bit of code between the <center></center> tags above is all I needed in my post editor to get that pretty title above, which is what I have displayed on my Holiday Gift Guide page this year. You can highlight the letters like any other font.

And this is what I use for my Technology page:

Technology

<h2 id=”minstrel”>Technology</h2>

How To Get Webfonts Working On Your Website

1. Well first, you need to find the fonts you want, and an incredible place to go when first starting out is Font Squirrel (using the filters on the right side to find only locally hosted free webfonts.) There are hundreds of places to find fonts, but I find this site to be super easy, especially if you’re just starting out. Check if the font you want is available for the web, it’ll have a globe icon just beneath the font title if its available for use.

2. Sometimes, the font we want is available for use online, but isn’t set up as a webfont kit (which is what you need for full font usage on any browser.) So you’ll need to do one extra step by downloading the font (in .OTF or .TIFF) format, and then load that font into Font Squirrel’s entirely easy Webfont Generator that will give you a zip file to download right away.

3. The fonts highlighted in blue are the ones that you’ll want to upload to your site. If there isn’t a folder in your wordpress theme for it already, create a “fonts” folder and then upload the four webfonts into it.

4. Copy this CSS below and add it to your style.css style sheet.

   @font-face {
       font-family:'FontName'; /* Give your font a name, anything you want, just keep it to one word. */    src: url('fonts/Font-Name.eot');
       src: url('fonts/Font-Name.eot?#iefix') format('embedded-opentype'),
            url('fonts/Font-Name.woff') format('woff'),
            url('fonts/Font-Name.ttf') format('truetype'),
            url('fonts/Font-Name.svg#FontName') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   #FontName { font-family: 'FontName' ; }

   So the Elsie font on Geek with Style shows up like this in our style.css style sheet.

   @font-face {
       font-family:'elsie';
       src: url('fonts/elsie-regular-webfont.eot');
       src: url('fonts/elsie-regular-webfont.eot?#iefix') format('embedded-opentype'),
            url('fonts/elsie-regular-webfont.woff') format('woff'),
            url('fonts/elsie-regular-webfont.ttf') format('truetype'),
            url('fonts/elsie-regular-webfont.svg#elsie') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   #elsie { font-family: 'elsie' ; }

5. Open a New Post editor window and have some fun! Your font is tagged as an ID (#) in your CSS file, so whenever you want to call up your font for text, open the “Text” tab of your editor (instead of the “Visual” tab) and add id=”FontName” to any tag that will encase your text. So if you want to write a paragraph with your new font, it will look something like this:

   
   All of your pretty words.
    

   Or if you want to use the font as a header within your post, it would look like this:

   All of your pretty words.
   

   You can even have this font work for a select amount of words, using the span tag, within a paragraph if that’s your thing:

   This is so amazing, I can't wait to tell you all about it!
   

And that’s it! 🙂

More Examples That Will Hopefully Inspire

In roughly five minutes, I have a cool font to use on my site.

In roughly five minutes, I have a cool font to use on my site.
 

That Will Even Work With Titles and Change Colours

That Will Even Work With Titles and Change Colours

I just want one word in my sentence to use the new font, ’cause I’m cool like that.

I just want one word in my sentence to use the new font, 'cause I'm cool like that.

While I used a nice “regular” font to showcase how this works, you can search out Christmas themed fonts and use them in the exactly same way.

The L in the title above is the letter “L” using the font “Kr Christmas Color Me”, which shows that there isn’t really a limit (except for font designer licensing/permissions,) on what you can do with your site and font choices.

So to get the L to look like the font image, I simply added this to the paragraph above:

L

Let me know if you have any questions, I’ll do my best to answer. 🙂