NEW! We are dogfooding the newly updated Ashford Pro v2.4 and premium theme called Actuate

How to use Google’s Web Font API with Ashford

by on December 7, 2010 » Add the second comment.

This version of the Axis theme uses Google’s Font API to display a non-standard web font, Nobile, for headlines. I have hesitated with font replacement until browsers starting more widely supporting the font-face tag. What finally made me use it is Google’s super simple API and the breadth of fonts that Google’s CDN makes available.

Here is how to add a of Google’s fonts to Ashford Pro or Axis theme, just add the following code to your functions.php file (ashford_pro/functions.php or axis_pro/functions.php):

// font replacement
function ashford_font_replacement(){
echo ‘<link href=”” rel=”stylesheet” type=”text/css”>’;
add_action(‘ashford_head_open’, ‘ashford_font_replacement’,3);
function ashford_font_replacement_css(){
echo ‘<style type=”text/css”>h1,h2,h3,h4,h5,h6,#blog_brand{font-family: “Nobile”, arial, serif;}</style>’;
add_action(‘ashford_head_css’, ‘ashford_font_replacement_css’,5);

If you want to use a different font, visit Googles font directory, select your font, click on the “Get the code” and modify the code above.  If  you want to make it more efficient, skip adding the ashford_font_replacement_css() and just add that code to your style.css file.

There are reasons to NOT use font-face (personally I’d never use sIFR or Cufon), but I think 2011 is the year this will be entry stakes for a high quality site. In face, I will be building font selection into v2.0 of Ashford Pro and all premium themes.


Liked this? Share it with your friends!


One Response to How to use Google’s Web Font API with Ashford

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">