How can I use custom fonts on my website? A helpful resources

How can I use custom fonts on my website? What is Cufon and @font-face? Which should I use? These are often asked question and in this tutorial I’ll answer them and show you how to get custom fonts working in all major browsers.

Cufon or @font-face? Typography on the web

As you may already know, if you wanted to display a custom font with anti-aliasing, you had to design the words in Photoshop and insert them as images into your website. Another option was to use Javascript or Flash. These days the latest and best solutions are Cufón javascript and @font-face CSS declaration.

Cufón

Cufon is an implementation of javascript, SVG, and Canvas that places your font after the browser has loaded your website with an amazing amount of speed and efficiency.

You can set it up in a few minutes, let’s see how. Visit Cufón website and download Cufón’s javascript file.


In Security you can set a specific domain to increase security. This way you can protect your font from evil ninjas out there. You can leave the final two sections at their default values. Accept the terms, click on Let’s Do This button and save the generated script.

Now create an HTML document and import these two javascript files:


<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>

Add some H1 and H2 headings to the HTML and initialize Cufón:


<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>

In replace function we can define which elements we’d like to replace with Cufón. If you want to replace specific elements by ID or class, simply import jQuery library BEFORE Cufón and you can start using its selector engine:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('#header h1');
Cufon.replace('.content h2');
</script>

That’s it! You can use any font you wish just make sure you have the proper privileges to use it.

Pros

  • * Fast
  • * Simple to install and use
  • * It works on every major browser on the market

Cons

  • * If javascript is disabled, default fonts will be used.
  • * Text isn’t selectable.
  • * You can’t define hover state

@font-face

@font-face CSS declaration also lets you use custom fonts in your web pages. Unfortunately older browsers support it differently.

The first step is get a free font because of licensing concerns, you cannot simply embed any font on your website. There are a lot of sites that lists free fonts that you can use with @font-face. My favorite is fontex.org.

Once you have your font, you need to create at least three font files in order to get support cross browser. Fortunately there’s an online tool which generates them for you and also includes sample pages! The @font-face Generator!

Finally create an HTML document, add some headings and paragraph and add the following CSS code:


@font-face {
font-family: 'MergeRegular';
src: url('merge-webfont.eot');
src: local('˘'), url('merge-webfont.woff') format('woff'), url('merge-webfont.ttf') format('truetype'), url('merge-webfont.svg#webfontC1PyeCOP') format('svg');
font-weight: normal;
font-style: normal;
}

h1, h2, p {
font-family: 'Merge', tahoma, verdana;
}

The code links to all of the different font formats that we have created, and will make the font work cross browser. When setting an element’s font fafmily, always provide a fallback web-safe font for people using really old browsers, otherwise they will end up with their browser’s default font.

Pros

  • * It works without Javascript
  • * Text is selectable

Cons

  • * Font rendering quality differs from browser to browsers
  • * While the font is downloading, the user see the default font during 1 or 2 seconds
  • * If the font is provided by your client, He may be concerned by the fact that the font will be downlodable from the website
Advertisements

Top 5 FREE WordPress Plugins for SEO

WordPress is without a question the most popular stand-alone blog platform. It is flexible and customizable; there are lots of useful plugins providing any functionality a blogger can think of. However, a fresh installation of a WordPress blogs leaves a lot for improvement. For instance, search engine optimization and duplicate content proofing.

With WordPress SEO Plugins you can more optimize your blog for search engines

1) HeadSpace2 SEO
Link: http://urbangiraffe.com/plugins/headspace2/
HeadSpace is a powerful all-in-one plugin to manage meta-data and handle a wide range of SEO tasks. With it you can tag your posts, create custom titles and descriptions that improve your page ranking, change the theme or run disabled plugins on specific pages, and a whole lot more.

Because the configuration of meta-data can be a complicated and tiresome process HeadSpace provides several shortcuts to reduce your effort:

* Meta-data nesting – data is collected not only from the page itself, but nested parent pages
* Dynamic data extracted – why repeat yourself when you can extract data from the post itself?
* Full GUI interface – data is entered alongside post content, and with a full auto-suggested AJAX interface for tags and keywords
* Mass-editing – now you can edit meta-data for all pages and posts at one go!

2) All in One SEO Pack
Link: http://semperfiwebdesign.com/
Features:

* Advanced Canonical URLs
* Fine tune Page Navigational Links
* Built-in API so other plugins/themes can access and extend functionality
* ONLY plugin to provide SEO Integration for WP e-Commerce sites
* Nonce Security
* Support for CMS-style WordPress installations
* Automatically optimizes your titles for search engines
* Generates META tags automatically
* Avoids the typical duplicate content found on WordPress blogs
* For beginners, you don’t even have to look at the options, it works out-of-the-box. Just install.
* For advanced users, you can fine-tune everything
* You can override any title and set any META description and any META keywords you want.
* Backward-Compatibility with many other plugins, like Auto Meta, Ultimate Tag Warrior and others.

3) SEO Friendly Images
Link: http://www.prelovac.com/vladimir/wordpress…friendly-images

SEO Friendly Images is a WordPress optimization plugin which automatically updates all images with proper ALT and TITLE attributes. If your images do not have ALT and TITLE already set, SEO Friendly Images will add them according the options you set. Additionally this makes the post W3C/xHTML valid as well.

ALT attribute is important part of search engine optimization. It describes your image to search engine and when a user searches for a certain image this is a key determining factor for a match.

TITLE attribute play lesser role but is important for visitors as this text will automatically appear in the tooltip when mouse is over the image.

4) Platinum SEO Pack
Link: http://techblissonline.com/platinum-seo-pack/
Features:

* Optimized Post and Page Titles for search engines
* Generates all SEO relevant META tags automatically
* Helps you avoid duplicate content
* Lets you override any title and set any META description and META keywords, for any post or page
* Compatible with most other plugins, like Auto Meta, Ultimate Tag Warrior and others.However you may have to disable All in One SEO pack
* You don’t have to fear changing permalinks. If you are not satisfied with the current permalink, change it through Settings–>Permalinks in your admin panel, without worrying about loss of Page rank or google penalty.Platinum SEO plugin will take care of issuing a 301 redirect to the new location.This is a new essential feature, not present in All in one SEO
* Add meta description and meta keywords tags to WordPress Categories and WordPress Tag pages.
* Add index, noindex, follow or nofollow, noarchive, nosnippet, noodp, noydir meta tags to any post/page.These options are not available in All in one SEO Pack.

5) Extreme SEO
Link: http://www.seolinknet.com/

This plugin has several functions that are all run without any effort on your part.

1. Provides your site with one way, content related, dofollow inbound links from other sites in the extremeseo network.
2. Provides links to related posts under your post content that open in a new browser window so you dont lose your visitors upon clicking the related post links.
3. Increases your site’s search engine ranking and Google Page Rank by providing static inbound links to your posts from related posts on other sites within the extremeseo network.

%d bloggers like this: