Close

Five Steps To Get Christmas Fonts to Brighten Up Your WordPress

Sharing is caring!

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.
Using a webfont on your website.

Using a webfont on your website.

  1. 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.
Simple Webfont generator.

Simple Webfont generator.

  1. 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.
What file to use in a webfont generator.

What file to use in a webfont generator.

  1. 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' !important; }

    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' !important; }
  2. 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. 🙂

[rev_slider alias="relatedpst"][/rev_slider]

Living in Superman’s Metropolis (aka Toronto, Canada), Aeryn Lynne found a way to entirely over-share everything she loves, and make a career out of it! Ultimately a geek, she waxes poetically over technology, squees over comic art, hunts down the nerdiest places to visit and literally sparkles, thanks to her makeup addiction.

Read More…

Leave a comment

6 Comments on “Five Steps To Get Christmas Fonts to Brighten Up Your WordPress

Ladena
December 3, 2014 at 8:33 pm

Oh I love this! I’ll have to try to add some cool fonts to my next blog post. Thanks!

Reply
Kerrie @ Family Food and Travel
December 3, 2014 at 9:08 pm

Such great tips. I am coding illiterate so this is super helpful to get the fonts I’d like. Thank you!

Reply
Deanna T. (@MapleLeafMommy)
December 4, 2014 at 9:20 am

So when someone loads it on mobile it just looks like plain old boring typeface (but saves on the bandwidth), is that the idea?

Reply
Aeryn Lynne
December 4, 2014 at 2:23 pm

Actually the only mobile browser it doesn’t seem to work with yet, at least with my phone, is Facebook’s new browser (the one now setup so that you don’t actually leave FB to view a webpage unless you hit the “Take me to Chrome” button. I’ve tried this page out on three other mobile browsers and it works fine. What image based fonts can do is be much data-usage friendly than images. 🙂

Reply
Christine
December 4, 2014 at 9:43 am

Seriously, you are so awesome. My tech guru for a reason! I’m not literate on things like this and am glad that I have you to go to! Fonts do make a big difference in how a post looks!

Reply
Randa @ The Bewitchin' Kitchen
December 4, 2014 at 12:13 pm

Pinning this! I always learn so much when I come to your blog Aeryn! Thanks.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

shares