Blog

google-fonts-image

Tutorial: How to Integrate Custom Google Fonts Into SlideDeck 2 for WordPress

On August 30, 20120 Comments

We’ve had a lot of our users asking how to add in Google Fonts or their own custom fonts to SlideDeck 2. And recently Dave wrote up a nice little FAQ on the topic. I thought I’d bring it here and elaborate on it slightly more.

This Tips & Tricks post requires some coding, but if you can copy and paste and edit a few lines of code and have access to your functions.php file, you can add your own fonts to use with SlideDeck 2 with relative ease. To load your own custom fonts you will need SlideDeck 2 for WordPress 2.1.20120823 or newer.

This example deck uses the Changa font from Google Fonts – compare to the Dribble Example on our Examples page which uses Lobster Two:

To add your own fonts you will be hooking into the filter that loads them. Here is how you do this:
Add the following code to your functions.php file of your WordPress theme:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
    $fonts['droid-sans'] = array( 

        // The name of the font displayed to the user in the drop-down
        'label' => "Droid Sans",

        // The CSS font stack used
        'stack' => "'Droid Sans', sans-serif",

        // The location of the CSS file that describes the web font
        'import' => "http://fonts.googleapis.com/css?family=Droid+Sans",

        // The CSS font weight used when this font is chosen
        'weight' => '400'
    );

    return $fonts;
}

add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );
What does it do?

This adds the Droid Sans font to the list of fonts that gets pulled into the Title Font and Body Font options of SlideDeck 2 when editing a Lens. You will be able to choose/select your font now for use in your deck. What are all the parts that make this work?

  • label – The name of the font displayed to the user in the drop-down
  • stack – The CSS font stack used or “font-family” property. For Google Fonts be sure to use what is specified in step 4 of the Use instructions, see below
  • import – The location of the CSS file that describes the web font
  • weight – The CSS font weight used when this font is chosen, be sure to use the correct value, some Google Fonts use a number value instead of “normal” or “bold”

To get the correct reference from Google Fonts, you just need the URL reference to the CSS for that font. You can get that by adding the font to your collection, going to Use, down to step 3 and copy the href value of the stylesheet link.

To get the correct font stack from Google Fonts, take a look at step 4 in the Use tab.

To get the correct font-weight from Google Fonts, take a look at step 1 in the Use tab. Note you can only load 1 weight per entry. Essentially treating each weight as its own font.

What if I want to add more than one font?

You can add in as many fonts as you like, just be sure that the key for the font in the $fonts array (‘droid-sans’ in this case) is unique. For example if you wanted to add in Droid Sans Normal, Droid Sans Bold & Proxima-Nova your code would look like this:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
    // Loads Droid Sans in Normal(400) font-weight from Google Fonts
    $fonts['droid-sans-normal'] = array(
        'label' => "Droid Sans Normal",
        'stack' => "'Droid Sans', sans-serif",
        'import' => "http://fonts.googleapis.com/css?family=Droid+Sans:400",
        'weight' => '400'
    );

    // Loads Droid Sans in Bold(700) font-weight from Google Fonts
    $fonts['droid-sans-bold'] = array(
        'label' => "Droid Sans Bold",
        'stack' => "'Droid Sans', sans-serif",
        'import' => "http://fonts.googleapis.com/css?family=Droid+Sans:700",
        'weight' => '700'
    );

    // Loads Proxima Nova in Bold font-weight from a local font file
    $fonts['proxima-nova'] = array(
        'label' => "Proxima Nova",
        'stack' => "Proxima Nova, sans-serif",
        'import' => "http://www.mywebsite.com/fonts/proxima-nova.css",
        'weight' => 'bold'
    );

    return $fonts;
}

add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );
The import value for Proxima-Nova looks different, why?

You may see that Proxima-Nova’s import value is different. Proxima-Nova is not a Google Font, but with a web usage license you can reference the CSS hosted on the website that includes this font. Check out these links for more information on @font-face:

Since this code is a WordPress filter, you need to return the $fonts variable at the end of the function, whether or not you have modified it. For more information on using WordPress filters check out:

What if I use TypeKit?

If you are using a service like TypeKit which requires the insertion of custom JavaScript to load the fonts, you can leave out the import key and value. See this example for how to format your filter:

function add_my_custom_fonts_to_slidedeck( $fonts, $slidedeck ){
    // Loads Museo 300 from TypeKit - you need to use the slidedeck_iframe_header action to echo scripts to view in preview and via iframe mode
    $fonts['museo-300'] = array(
        'label' => "Museo 300",
        'stack' => "'museo', serif",
        'weight' => '300'
    );

    return $fonts;
}

add_filter( 'slidedeck_get_font', 'add_my_custom_fonts_to_slidedeck', 10, 2 );

You will need to make sure you add your TypeKit JavaScript to the <head> tag of your site, follow TypeKit’s instructions here. You will also need to hook into the newly added slidedeck_iframe_header action and echo your scripts into the iframe head for the preview and if you load your SlideDeck using the iframe method. To do this you would have an addition to your functions.php file that would look like this:

function add_my_custom_typekit_font_script( $slidedeck, $preview ){
	// Replace the JavaScript tags here with the code for your Typekit Kit
	$script_output = '<script type="text/javascript" src="//use.typekit.net/oak0aqy.js"></script>';
	$script_output .= '<script type="text/javascript">try{Typekit.load();}catch(e){}</script>';

	echo $script_output;
}

add_action( 'slidedeck_iframe_header', 'add_my_custom_typekit_font_script', 10, 2);
In Summary

You can add the fonts you want from Google Fonts with just a bit of custom code, you can even add in your own fonts via the @font-face implementation just by loading your own CSS. With the ability to load in your own custom fonts, you can now make SlideDeck 2 fit that much better with your site than you could ever before.

We would love to see your implementations of custom fonts in your SlideDecks. Share a link to your custom font SlideDeck in the comments below. If you have any technical questions about implementing your own custom fonts, please create a new support ticket.

Leave a Reply