Categories
WordPress

Adding icon fonts to WordPress menus

Header menu of ciaobambino.com with font icon
Several people have asked me how I added the plane icon seen in the image above to the main menu of CiaoBambino.com. Here is a quick breakdown of my method so you can try this for yourself and add some font icon power to your WordPress menus.

Font icons are becoming all the rage for web designers and developers, and with good reason. They allow us to add scaleable vector-based icons to our sites with ease which in turn produce crisp and clear graphics on any screen at any size with minimal effort. And because these icons are fonts you can style their color, shape, and alignment the same way you style your regular text.

Step 1: Get your font icons

First you need some font icons to add to your site. There are several libraries available including the enormous Font Awesome and the more simplistic Genericons. And if you want to create your own custom icons you can use a service like IcoMoon or even roll your own.

A font icon kit consists of a set of common components: The fonts themselves, usually served up in TTF, OTF, and SVG flavors for cross-browser support, and a stylesheet with @font-face rule sets defining when and how the font will be used.

Technically the only thing you need to do to make a font icon kit active on your site is to call its stylesheet, but how exactly this happens depends on your chosen kit. Some like FontAwesome provide a cloud hosted service. Others require you to download the font kit and add it to your theme. In this example I’ll use FontAwesome and the BootStrapCDN option as outlined in the documentation.

To make the icon font active on the site we’ll enqueue it from functions.php in your theme or child theme:

/**
 * Enqueue Font Icon Stylesheet
 */
function yourthemename_iconfonts() {
	wp_enqueue_style( 'FontAwesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );
}
add_action( 'wp_enqueue_scripts', 'yourthemename_iconfonts' );

This injects the necessary style sheet code into your header file dynamically. The reason you want to enqueue the styles rather than just add them to your header.php file is that you may want to prevent the style from loading on certain pages and this can be done with simple conditional statements within the function above.

Step 2: Trigger an Icon using a style

The creators of these font icon kits have gone out of their way to make adding font icons as easy as possible. This includes providing you with a long list of different methods for adding the icons themselves. In most cases these methods are based on the simple principle of using a class to add a :before pseudo element that has a content declaration with the specific symbol that identifies the icon. If you’re not familiar with CSS that probably sounds like complete gibberish so here is an example of how FontAwesome declares the Twitter icon:

.fa {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fa-twitter:before {
	content: "f099";
}

As you can see the .fa rule defines the FontAwesome font family and how any icon from this family will be presented and the .fa-twitter:before rule specifies the icon to be used. The genius of this method is the use of the :before pseudo class and the content declaration. This ensures that when a text-only browser accesses the content or the font doesn’t work, you won’t end up with some bizarre icon in its place. It’s not part of the content itself but instead added as a decorative element only.

Knowing this it should be clear how you trigger the icon: Simply add .fa and .fa-twitter to whatever element you want the icon to appear in front of and it happens automatically.

Adding CSS classes to WordPress menus

This process is easy in WordPress: Go to Appearance -> Menus, clicking on Screen Options in the top right corner, activating the CSS styles option, and adding the classes to the CSS Styles area for the menu item in question.

This adds the icon inline in front of the menu text in question. It also means the icon will not inherit the styling of the menu item (color, hover states, etc) and you may have to add extra styling to make it look like you want it to look in your regular stylesheet.

An alternative method

Adding HTML to a WordPress menu itemIf you want to add the icon as part of your menu item meaning it is styled and reacts the same as the menu text you can do so using a little known trick: You see the Navigation Label filed in WordPress menus accepts HTML. This means you can add the trigger code for the font icon right into the Navigation Label like this:

This places the icon inside the anchor tag and it becomes part of the active area of the link. Once the icon is added you will have to add some extra styling to your stylesheet to prevent it from jamming up against the text. In my example I added the icon to the right of the text so my custom style rule looks like this:

#access .fa {
	padding: 0 0 0 5px;
}

Your turn

Now that you know how it’s done it’s your turn to try it out on your own site. Like I said font icons are extremely powerful and can be used for all sorts of interesting things. Adding them as inline items in your menus is just one of an infinite number of possibilities. FontAwesome has a long list of examples of different inclusion methods and techniques for adding font icons into your site and more options are thought up every day. Once you see what is possible and realize the power and potential of this technique I’m sure you’ll get addicted. So go try this out for yourself, see how font icons can add some power to your own site, and tell me about the experience in the comments below!

Categories
24 Days of WordPress Tutorials

Day 22: Custom Fonts with FontSquirrel.com

In Custom Fonts with Google Fonts I explained how to add custom fonts from the Google Font Directory to your WordPress site. The problem with the Google Font Directory is that it only has a limited (but growing) supply of fonts and that some of them are not very nice to look at when they get rendered in live text. Fortunately there are alternatives. My favourite is Font Squirrel. Font Squirrel offers up a huge list of free fonts ready for embedding and many of them are very nice and functional. That said I recommend using some of the more extreme fonts for headings only – setting your entire text content to a handwriting font or something really big and blocky has the potential of driving your readers away.

Adding a font from Font Squirrel requires a bit more work than adding a Google Font Directory font, but don’t fret – it’s not hard at all and the end result is well worth the effort.

1. Find a font on FontSquirrel.com

An obvious question when embedding fonts in your site is “Why can’t I just add any font I want?” The answer is a bit complicated, but here is the gist of it: Fonts are intelectual property, just like a photo, a video or a piece of writing. As such the creator can decide who can and cannot use a font and what the font can be used for. Generally speaking most fonts can be used on the web in one form or another, but there are a lot of famous and popular fonts that can not be embedded in a site using @font-face. To find out what fonts can and cannot be embedded, and whether you need to pay a licencing fee to use a font you have to read the licencing agreement for that particular font. And trust me, those things are legal behemoths and no fun to read.

A better option is to safeguard yourself by only using free open-source fonts. This is where Font Squirrel comes in. When you go to the site, click on the button that says #font-face Kits. From here you can browse all the fonts Font Squirrel have found, compiled and prepared for @font-face embedding, and better yet Font Squirrel has already dug through the licences of these fonts to make sure they allow embedding. In other words someone else did all the hard work and all you have to do is use the font (even so you should read the licence just to be sure). And the best part? The fonts are (mostly) free!

So, you go to FontSquirrel.com, click on @font-face Kits and find a font you like. Now comes the fun part.

2. Get the @font-face kit


Font Squirrel
Once you’ve found a font you like, say New Athena Unicode for example, click on it and you are taken to the page for that font. From here you can look at specimens, test drive the font with your own text (good idea if your language includes weird characters like ß, æ, ø, Ã¥, or other linguistic anomalies), look at a charecter map, read the licence for that font and get the all important @font-face kit. If you are happy with your selection click the @font-face kit button. From here you can select a subset (default is usually fine) and pick what font formats to include. I recommend including all the formats to sensure that as many browsers as possible will be able to read your fonts. With all your settings done click Download @font-face Kit and you get a zipped file to be saved on your computer.

3. Using the @font-face Kit

To use the @font-face kit you need to do three things: Add the font files and font stylesheet to your site (I recommend putting them in a dedicated folder under your theme), call the custom stylesheet from your header.php file and add the call to the font from your theme stylesheet. Here is that process step by step:

First go to your theme folder and create a new folder. For future reference I recommend naming the folder the name of the font so in my case that is NewAthenaUnicode. Extract all the content from the zipped archive and place it in the new folder. Now you should have a folder with 3 or more files including demo.html, a text document with licencing information, one or more font files (ttf, eot, svg, woff) and a stylesheet named stylesheet.css.

Next you need to call the stylesheet from your header.php file. Like we did with the Google fonts open your header file and find the call to your normal stylesheet:

Create a new line directly above and insert a link to your custom font stylesheet. To make this foolproof use the WordPress template tag to define the stylesheet address and then just add the folder you created along with stylesheet.css to it. If you are working with a standard theme it will look something like this:

If you are working with a child-theme you have to use a different template tag and the code will look something like this:

Save the header.php file and upload it along with the custom font directory to your web host and visiting browsers will now call the new fonts and have them ready to be used.

The last step is to add your new custom font to styles in your theme stylesheet so they are displayed. To find the correct name for your font first open the stylesheet.css file found in your custom font directory and look at the @font-face style definition. For New Athena Unicode Regular it looks like this:


@font-face {
	font-family: 'NewAthenaUnicodeRegular';
	src: url('new_athena_unicode-webfont.eot');
	src: local('☺'), url('new_athena_unicode-webfont.woff') format('woff'), url('new_athena_unicode-webfont.ttf') format('truetype'), url('new_athena_unicode-webfont.svg#webfontTqKRtuvj') format('svg');
	font-weight: normal;
	font-style: normal;
}

What you are looking for here is the font-family name which in this case is NewAthenaUnicodeRegular. Now all I have to do is put this name into my font family calls throughout my theme stylesheet and the new font will be used. As an example to add the new font to the paragraphs of this site the p style would look like this:


p {
	font-family: 'NewAthenaUnicodeRegular', Times New Roman, Times, serif;
	font-size: 0.8em;
	color: #333333;
	margin-bottom: 10px;
	text-align: justify;
	line-height: 1.5em;
}

As you can see using custom fonts from Font Squirrel in your WordPress site is relatively easy and can give your site a whole new look. Yes, it is more cumbersome than using the Google Font Directory, but not by much, and in return you have far more fonts to choose from.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

Categories
24 Days of WordPress Tutorials

Day 1: Custom fonts with Google Fonts

Bored of always using Arial, Georgia, Times and Courier for your fonts online? Well, the old safe font restrictions are crumbling and you can now start adding new cool fonts to your WordPress sites. Just make sure you do it right. In this first of two tutorials you’ll learn how to use free fonts from Google to bring some new font styling to your site. In the second part you’ll learn how to do the same with FontSquirrel.com fonts. But first some history:

In web design there is one rule that drives people insane: You need to stick to so-called “safe” font families. These are

  • Arial, Helvetica, sans-serif
  • Georgia, Times New Roman, Times, serif
  • Courier New, Courier, monospace

The reason for this very annoying restriction is that when you define a font family for text on a website you are in fact telling the visiting computer to use one of its fonts to display the text. And because not all computers have the same fonts, and the fonts listed above are pretty much the only ones found on every computer, if you want to ensure that all visitors get the same experience you are stuck using one of these font families.

You’ll notice that each of the three safe font families actually contains three or more font definitions. The way this works is the browser asks the computer “Do you have Arial?”. If the computer is a PC it’ll say “Yes” and Arial is used. If the computer is a Mac it’ll say “No” and the browser will move down the line and say “OK, do you have a Helvetica then?” whereupon the Mac will answer “Yes” and Helvetica is used. And if the computer has neither Arial nor Helvetica the browser will ask for the default sans-serif font.

But there is another way. Using a relatively new CSS style called @font-face we can now call custom fonts from the web and have browsers display those fonts instead. It’s not a perfect science yet, and you’ll find that there are browsers that screw it up, but it’s the start of a new revolution of custom web fonts. Just always remember to add some standard fonts in your family in case the browser can’t take the @font-face heat.

Custom fonts with the Google Font Directory

By far the easiest way of introducing new fonts to your site is through the open source Google Font Directory. All you need is a couple of very minor tweaks to your code. This tutorial focuses on WordPress themes but you can do this to static pages and other CMSes as well.

Josefine Google Font

  1. Go to the Google Font Directory and find the font you want to use.
  2. Click the font you want and you’re taken to the page for this font. From here you can look at examples of the font in use, look at the entire character set and even launch the font previewer where you can type in custom text and see how the font displays. This is a good idea since some of these fonts look pretty crusty live on the web.
  3. When you are satisfied that this is in fact the font you want to use, click Get The Code and you are taken to the code page.
  4. Depending on the font you chose it may have a lot of different variants. I recommend turning them all on so you have lots of options (thin, condensed, bold, italicized etc etc) (see image above).
  5. Now you have to do two things: Copy the stylesheet code and paste it into the head section of your header.php file and insert the font name into whatever font family you want it to be applied to in your style.css file.

Adding a new font stylesheet to header.php

Rather than having to add the @font-face style directly to your own stylesheet the Google Font Directory lets you call their custom font stylesheets directly. This is great because it reduces the server load on your site and also means if Google makes changes to the font those changes are reflected immediately on your site. You add the custom font stylesheet to your header.php file within the <head> tag. To ensure that it works you should always add it above the code that calls the theme stylesheet for your site. That code looks something like this:


Open header.php in your favourite HTML editor or even Notepad, find the line above, create a new line directly above it and copy and paste in the stylesheet code from Google. When you save and upload the new header.php file the browser will call the custom font stylesheet from Google and be ready to display the custom font on your site.

Add the custom font to your content

If you’ve worked with CSS before the next part is child’s play. But if CSS is foreign to you it may be a bit tricky to understand so I’m going to try to give you a basic primer here: All content on a HTML page is wrapped inside beginning and end tags. As an example all paragraphs are wrapped between a beginning <p> tag and an ending </p> tag. CSS styles are applied to these tags throughout your pages, so to style the content within the <p> tags you create a style called ‘p’ and define a set of parameters. The p style for this site looks like this:

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333333;
	margin-bottom: 10px;
	text-align: justify;
	line-height: 1.5em;
}

If you want to use a custom Google font to style a particular tag you simply find the style that controls that tag and add the font name to the font-family variable like I’ve done below with the Josefin Sans font:

p {
	font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333333;
	margin-bottom: 10px;
	text-align: justify;
	line-height: 1.5em;
}

Now all you have to do is save the style.css file and upload it to your site and you’re good to go.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.