Welcome to the third installment in Web Development series. If you’re just joining us, the first posts in the series covered JavaScript Optimization and HTML5 Custom Data Attributes … If you haven’t read those yet, take a few minutes to catch up and head back to this blog where we’ll be looking at how custom web fonts can add a little spice to your already-fantastic website.

If you’re like me, you’ve probably used the same three or four fonts on most sites you’ve designed in the past: Arial, Courier New, Trebuchet MS and Verdana. You know that pretty much all browsers will have support for these “core” fonts, so you never ventured beyond them because you wanted the experience to remain the same for everyone, no matter what browser a user was using to surf. If you were adventurous and wanted to throw in a little typographical deviation, you might have created a custom image of the text in whatever font Photoshop would allow, but those days are in the past (or at least they should be).

Why is using an image instead of plain text unfriendly?

1. Lack of Flexibility – Creating an image is time-consuming. Even if you have really fast fingers and know your way around Photoshop, it will never be as fast as simply typing that text into your favorite editor. Also, you can’t change the styles (font-size, color, text-decoration, etc.) of an image using CSS like you can with text.
2. Lack of Accessibility – Not everyone is alike. Some of your readers or clients may have impairments that require screen readers or a really large font. Using an image – especially one that doesn’t contain a good long description – prevents those users from getting the full experience. Also, some people use text-only browsers that don’t display any images. Think about your whole audience!
3. More to Download – Plain text doesn’t require the same number of bytes as an image of that same text. By not having another image, you are saving on the amount of time it takes to load your page.

Now that we’re on the same page about the downsides of the “old way” of doing things, let’s look at some cool HTML5-powered methods for displaying custom fonts. Before we get started, we need to have some custom fonts to use. Google has a nice interface for downloading custom fonts (http://www.google.com/webfonts), and there are plenty of other sites that provide free and non-free fonts that can suit your taste/needs. You can pick and choose which ones you’d like to use (remembering to always follow copyright guidelines), and once you’ve created and downloaded your collection of fonts, you’ll need to setup your CSS to read them.

For simplicity, my file structure will be setup with the HTML and CSS files in the same root directory. I will have a fonts directory where I will keep all my custom fonts.

/fonts.html
/fonts.css
/styles.css
/fonts/MyCustomFont/MyCustomFont-Regular.ttf
/fonts/MyCustomFont/MyCustomFont-Bold.ttf
/fonts/...

My fonts.html file will include the two CSS files in the head section. The order in which you include the CSS files does not matter.

<link rel="stylesheet" type="text/css" href="fonts.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />

The fonts.css file will include the definitions for all of our custom fonts. The styles.css file will be our main CSS file for our website. Defining our custom fonts (in fonts.css) is really simple:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.ttf') format('truetype');
}

It’s almost too easy thanks to HTML5!

Let’s break this down into its components to better understand what’s going on here. The @font-face declaration will be ignored by older browsers that don’t understand it, so this standards-compliant definition degrades nicely. The font-family descriptor is the name that you’ll use to reference this font family in your other CSS file(s). The src descriptor contains the location of where your font is stored and the format of the font.

There are several things to note here. The quotes around MyCustomFont in the font-family descriptor are optional. If it were My Custom Font instead (in fonts.css and styles.css), it would still be successfully read. The quotes around the url portion are also optional. However, the quotes around the format portion are not optional. To keep things consistent, I have a habit of adding quotes around all of these items.

An alternative way to define the same font would be to leave off the format portion of the src descriptor. Browsers don’t need the format portion if it’s a standard font format (described below).

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.ttf');
}

Like standard url inclusions in other CSS definitions, the URL item is relative to the location of the definition file (fonts.css). The URL may also be an absolute location or point to a different website altogether. If using the Google web fonts site mentioned earlier (or similar site), you may simply point the URL to the location suggested instead of downloading the actual font.

If you’ve dealt with web fonts before, you may already be familiar with the multiple formats: WOFF (Web Open Font Format, .woff), TrueType (.ttf), OpenType (.ttf, .otf), Embedded Open Type (.eot) and SVG Font (.svg, .svgz). I won’t go into great detail here about these, but if you’re interested in learning more, Google and W3C are great resources.

It should be noted that all browsers are not alike (no shock there) and some may not render some font formats correctly or at all. You can get around this by including multiple src descriptors in your @font-face declaration to try and support all the browsers.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.eot'); /* Old IE */
    src: url('fonts/MyCustomFont/MyCustomFont-Regular.ttf'); /* Cool browsers */
}

Now that we have our font definition setup, we have to include our new custom font in our styles.css. You’ve done this plenty of times:

h1, p {
    font-family: MyCustomFont, Arial;
}

There you go! For some reason if MyCustomFont is not understood, the browser will default to Arial. This degrades gracefully and is really simple to use. One thing to note is that even though your fonts.css file may define twenty custom fonts, only the fonts that are included and used in your styles.css file will be downloaded. This is very smart of the browser – it only downloads what it’s going to use.

So now you have one more tool to add to your development box. As more users adopt newer, standards-compliant browsers, it’s easier to give your site some spice without the headaches of creating unnecessary images. Go forth and impress your friends with your new web font knowledge!

Happy Coding!

-Philip

P.S. As a bonus, you can check out the in-line style declaration in the source of this post to see how “Happy Coding!” is coded to use the Monofett font family.

The New Number One Spot: Planning for the Future of SEO

You run a successful business, or at least the IT for a successful business — that’s why you’re on SoftLayer. And, chances are, you’ve already spent lots of time and effort optimizing your site for search engines. You’ve built backlinks; you’ve ensured the structure of your site allows the search engine spiders to see every page of the site and prevents the creation of duplicate content; you’ve carefully written titles, friendly URLs and header tags; and you’ve continuously tweaked your on-page content to get to the number one spot in Google, Bing and other search engines.

Unfortunately, that apical spot is quickly becoming an apocryphal one; being number one isn’t what is used to be. The Search Engine Results Page (SERP) has undergone dramatic changes in the past few years, and even if you optimize perfectly and grab the top spot, you might be pushed down (even below the fold) by a variety of other Google products:

• Ads & Comparison Ads
• Local Results
• Image Results
• Video Results
• Shopping Results

In today’s SEO market, you need to optimize not only for regular web results, but for every other Google product too. Luckily, there are a few tips you can use to make sure you appear in those products, and get the new and improved global number one spot—and lots of traffic too.

Local
Does your business have any local presence? Or do you ever see yourself buried under lots of local results, even when you have great SEO? Optimizing your local presence can fix that, and it’s a pretty simple task. If Google already ranks you well, then it considers your site to be a high quality site. You just need to make sure it also considers your site to be a local one as well.

To let the search engines know you want to rank locally, follow these four steps:

1. Add your company address to the footer of your page. Use the address Google already has on file for you. (If you tell customers that you are located at “1156 6th Avenue” and Google has you listed at “1156 Avenue of the Americas,” use the latter.
2. Embed a Google map on your contact us page. Find your company on Google Maps, then click the link icon on the top right of the map. You’ll see an option to “Customize the Embedded Map.” Pick the size that works for you and add it to your site.
3. If you haven’t already, claim your Google Places account at http://www.google.com/placesforbusiness
4. Lastly, build more links. I know you’ve already built a lot of relevant, quality links, but now you need relevant, quality local links, so make sure you’re linked to from local portals, yellow pages and local directories.

Images
If your customers are often looking for images – of your products, of your content or anything on else on your site – or if your results are pushed down by image results, you need to take the extra step of optimizing your images. Ignore what you’ve heard before about alt tags and image titles; we’ll share some of the real steps to take to make sure your images rank too.

As we saw with local SEO, ranking for images isn’t about doing special SEO for images as much as it is about doing great traditional SEO, and letting Google know your images are there … and that you want to rank for them in Google Images and in Universal Search results. The first – and more important – step for ensuring that your images rank is making sure the page on which that image is found is perfectly optimized. Next, focus on these steps:

1. The most important image-specific optimization technique is ensuring that the name of the image contains the word or phrase you are optimizing for. Is it a picture of your West Coast data center? Call it “west-coast-data-center.jpg” instead “DC76182687.jpg.”
2. The next most important element is the content surrounding the image (or images) in question. That data center picture will rank well if it’s on a page all about your data center locations – and particularly well if it’s embedded right in the middle of a paragraph about your West Coast data center. It won’t do very well in a slideshow with a one-line caption beneath it.
3. You can highlight the images you particularly want Google to rank well in Universal/Image results by adding those images to your XML Sitemap. Inside the tag, add the following lines for each image you want to highlight:
   <image:image>
   <image:loc>http://example.com/image.jpg</image:loc>
</image:image>

Google recently improved its image duplicate filter. Buying lots of stock images? Then it might be harder to rank for those images. But if you have original images, then great! You have a leg up on your competitors.

Video
Got any videos on your site? Then you definitely want to implement the steps below to make sure Google recognizes those videos and ranks them highly. If you do, any page that has a video will get a thumbnail in the SERPs and you’ll show up in Google Video search. You’ll also be given an incredible, unfair advantage: if there are two videos on a page, Google likes to group them together; if you’re the lower video, you’ll automatically be pulled up the SERP to be next to the higher video.

As we saw with images, your first step is great optimization of the page on which the video resides. That means ensuring the video isn’t alone on the page; try to add other textual content – comments, transcripts, context – alongside the video. This is especially important for video, since Google just interprets the video on the already well-optimized page, instead of ranking video separately on the SERP. You just need to let Google know you have a video.

1. The first step to letting Google know about your video is actually having a video on your site, and fully owning and hosting that video. Embedding a YouTube video on your page – even if you filmed and produced it, and it’s on your channel – is not enough. You need to host both the video (the .swf file) and the video player (the .flv file). If you use a service like BrightCove to host and play your videos, make sure to set up a CNAME from your domain to BrightCove’s, to prove to the engines that the videos really are yours. This applies to images as well.
2. Once you are hosting the video, you need to tell Google that the video is there. You can either set up a video sitemap, an XML file similar to your XML Sitemap, that tells the engines where it can find videos on your site and some information about those videos—including where the thumbnail image is, the title of the video, a description and some more optional information. If you can’t put together a video sitemap, you can add some meta information to your page, called micro formats, that will let Google know there’s a video on that page. The two accepted formats are Facebook Share and RDFa.
3. Lastly, make sure the URL of the page that contains the video is less than 70 characters. Any more and Google might truncate the URL. If they do that, they won’t show the thumbnail, even if you’ve followed the above two steps.

You may have noticed a theme here: Good SEO combined with following a few special steps to make sure Google knows which special category you are trying to rank for translates into great Universal SEO. Follow these steps, and you’re sure to get the real #1 spot … And if you want a little help getting the “good SEO” piece done, you can always use Drive, the only SEO software designed to optimize for Universal, rich-media SEO to help. For more information about our business and what we do, check out the RankAbove page in the SoftLayer Marketplace.

If this information is helpful and you want to hear more, leave a comment, and I’ll start working on a follow up with tips for Google Shopping, Google News and more. To tide you over, you can click through a presentation about blended search from October:

- Eli Feldblum, RankAbove