Artisteer add Google Fonts

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we will look at adding a better Google font.

Cufón fonts are often the choice, but we are going to look at Google Fonts which has a growing library of fonts, they render in the browser nice and quick, and have an API we can talk to, so no uploading or including the fonts in our theme folders.

Artisteer

Artisteer is a theme generator that will give us a nice acceptable WordPress theme with a small amount of time and effort.

The price to market is reasonable, if we require to produce more than one theme, or just cannot find a theme to suit our requirements and want to make our own.

For our example we will use ‘Artisteer Version 3 RC’, and one of the sample themes “My Diary”, all we have done is saved it as a WordPress theme.

It does not matter if you do not have Artisteer, you can download the theme with the code below from this page: My Diary (671)

If we open the theme we can see that the font does not really suit the theme name, a diary theme may look better with a hand writing style theme heading font.

We could also apply the Google font to any text in our theme.

google-fonts-1

Google Fonts

Lets visit the Google Fonts website and look for a nice handwriting font, the previews are nice and large and we have chosen a font called “Over the Rainbow”

google-fonts-2

When we click on the title hyperlink we can see our chosen fonts home page, this will suit our diary theme.

google-fonts-3

Next we click on the Launch in Font Viewer we are interested in two bits of information the Font Family ‘Over the Rainbow’ (Case Sensitive) and the font style family=Over+the+Rainbow:regular.

This is the part after the colon :regular, we make a note of these as they will be used as defaults for our themes Options Page.

google-fonts-4

defaults.php

Ok we have our font name and style so we can start to add a little code, in our themes /library/ folder we open the file defaults.php.

Adding in the defaults for our Google font, we we can see we have the font name, and the font size, we tried different sizes over on Google fonts and decided to use 38, this can be changed as a default later.

We add our new defaults after the line:

$theme_default_options = array(

/* googleFont Settings */
 'theme_title_googleFont' => 0,
 'theme_title_fontName' => 'Over the Rainbow',
 'theme_title_FontStyle' => 'regular',
 'theme_title_fontBold' => 1,
 'theme_title_fontItalic' => 0,
 'theme_title_fontSize' => 38,
 'theme_title_fontSpacing' => 0,
 'theme_page_titles' => 0,
 'theme_widget_titles' => 0,
 /* googleFont Settings */

options.php

We need a theme options array for the Google ‘font style’, we add this in the /library/options.php this we will add before the line:

global $theme_options;


/* Google Font Style Options */
$google_font_style_options = array(
 'regular' => 'font+name:regular',
 'bold' => 'font+name:bold'
);

After the header section of options we add our header font section, this we add before the lines.

array(
‘name’ => __(‘Navigation Menu’, THEME_NS),


/* googleFont Settings */
 array(
 'name' => __('Heading Google Font', THEME_NS),
 'type' => 'heading'
 ),

array(
 'id' => 'theme_title_googleFont',
 'name' => __('Use Google Font', THEME_NS),
 'desc' => __('Select to use Alternate Google Font', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_title_fontName',
 'name' => __('Google Font Name', THEME_NS),
 'desc' => __('Google Font Name from <a href="<a href="http://www.google.com/webfonts">Google" _mce_href="http://www.google.com/webfonts">Google">http://www.google.com/webfonts">Google</a> Web Fonts<a>', THEME_NS),
 'type' => 'text'
 ),

array(
 'id' => 'theme_title_FontStyle',
 'name' => __('Font Type', THEME_NS),
 'type' => 'select',
 'options' => $google_font_style_options,
 'desc' => __('the text after the colon : from the font preview EG: over+the+rainbow:<b>regular</b>', THEME_NS),
 ),

 array(
 'id' => 'theme_title_fontSize',
 'name' => __('Font Size', THEME_NS),
 'desc' => __('Numeric Value for the Font Size', THEME_NS),
 'type' => 'numeric'
 ),

array(
 'id' => 'theme_title_fontSpacing',
 'name' => __('Font Spacing', THEME_NS),
 'desc' => __('Numeric Value for the Font Spacing % of em EG: 20 = 0.20em', THEME_NS),
 'type' => 'numeric'
 ),

array(
 'id' => 'theme_title_fontBold',
 'name' => __('Google Font Bold', THEME_NS),
 'desc' => __('Font Bold', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_title_fontItalic',
 'name' => __('Google Font Italic', THEME_NS),
 'desc' => __('Font Italic', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_page_titles',
 'name' => __('Post and Page Titles', THEME_NS),
 'desc' => __('Apply to Post and Page Titles', THEME_NS),
 'type' => 'checkbox'
 ),

array(
 'id' => 'theme_widget_titles',
 'name' => __('Widget Titles', THEME_NS),
 'desc' => __('Apply Font to Widget Titles', THEME_NS),
 'type' => 'checkbox'
 ),
 /* googleFont Settings */

header-font.php

Now  we create a new file called header-font.php in our themes folder, this is a WordPress template part that we will call from the header.php file, by using a template part the code is easy to transfer.

We take the options set from the theme options page add them to an array and use this to formulate the dynamic style.


<?php if( !theme_get_option('theme_title_googleFont') ) return; ?>

<?php
$font=array();
//The name of the Google Font
$font['name'] = theme_get_option('theme_title_fontName');
$font['style'] = theme_get_option('theme_title_fontStyle');
//Parameter to pass to Google Fonts
$font['parameter'] = str_replace(' ','+',$font['name']) .':' .$font['style'];
//If the fold is bold set the weight to 700 else 400
$font['bold'] = ( theme_get_option('theme_title_fontBold') ? 700 : 400 );
//If the fold is italic set the font style to italic else normal
$font['italic'] = (theme_get_option('theme_title_fontItalic' ) ? 'italic' : 'normal' );
//Set the font size in pixels
$font['size'] = theme_get_option('theme_title_fontSize');
//Set the font spacing as a % of em
$font['spacing'] = theme_get_option('theme_title_fontSpacing') / 100;
//Set the page and post titles to the Google font
$font['page'] = theme_get_option('theme_page_titles' );
$font['widget'] = theme_get_option('theme_widget_titles' );
?>

<link  href="<a href="http://fonts.googleapis.com/css?family=<?php">http://fonts.googleapis.com/css?family=<?php</a> echo $font['parameter'] ?>" rel="stylesheet" type="text/css" >
<style>
 h1.art-logo-name a{
 font-family: '<?php echo $font['name']; ?>', serif;
 font-size: <?php echo $font['size']; ?>px !important;
 font-style: <?php echo $font['italic']; ?>;
 font-weight: <?php echo $font['bold']; ?>;
 letter-spacing: <?php echo $font['spacing']; ?>em;
 }
 <?php if ( $font['page'] ) : ?>
 h2.art-postheader a{
 font-family: '<?php echo $font['name']; ?>', serif;
 letter-spacing: <?php echo $font['spacing']; ?>em;

 }
 <?php endif; ?>

<?php if ( $font['page'] ) : ?>
 .art-blockheader h3.t {
 font-family: '<?php echo $font['name']; ?>', serif;
 letter-spacing: <?php echo $font['spacing']; ?>em;
 }
 <?php endif; ?>
</style>

header.php

In out themes header.php we add a line of code to call our new template part, and this will be before the lines for the version check.

<?php if(WP_VERSION < 3.0): ?>

<?php //Load our Google Font ?>
<?php get_template_part('header','font'); ?>

Theme Options

Thats the code done so lets look at what we have, if we go to Admin > Appearance > Theme Options.

We can see our defaults, we have the use Google Font set as false, if we prefer the font to be deafult we would change the default to 1 in the defaults.php

google-fonts-5

Our Google Font

Well there is our font, not bad but it is a little tight and could do with a little line spacing.

google-fonts-6

Line Spacing

When we add line spacing we do not put in the fraction but a whole number which will be divided by 100, we have done this because the Artisteer ‘numeric’ option cannot deal with fractions.

google-fonts-7

That looks a lot better more like a heading when we add in the spacing, this will vary from font to font.

google-fonts-9

Widget Titles Page and Post Heading

Last test is to turn on the page and widget headings to use our nice Google Font.

google-fonts-10

Wow! how easy was that to make our Artisteer theme more interesting.

google-fonts-11

A Different Font

We had the Google font Style and might woner why it is there, lets look at the Google font Cabin Sketch this requires that we pass Google :bold in the fonts url.

google-fonts-12

We just enter ‘Cabin Sketch’ in the name and change the Font Type to bold, this is not the font weight but a Google option.

google-fonts-13

There we go!

google-fonts-14

View Page Source

Lets have a look at the page source and see what our code does:

<link  href="<a href="http://fonts.googleapis.com/css?family=Cabin+Sketch:bold">http://fonts.googleapis.com/css?family=Cabin+Sketch:bold</a>" rel="stylesheet" type="text/css" >
<style>
 h1.art-logo-name a{
 font-family: 'Cabin Sketch', serif;
 font-size: 38px !important;
 font-style: normal;
 font-weight: 700;
 letter-spacing: 0.2em;
 }
 h2.art-postheader a{
 font-family: 'Cabin Sketch', serif;
 letter-spacing: 0.2em;

 }

 .art-blockheader h3.t {
 font-family: 'Cabin Sketch', serif;
 letter-spacing: 0.2em;
 }
</style>

Want to see a live example we are using this on a new non-artisteer theme, where we have to hard code the options, using the Artisteer Theme Options is a much more empowering solution.

Do not for get to like this page and spread the word!

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

12 thoughts on “Artisteer add Google Fonts

  1. wow, awesome! i’m definitely going to use this!

    i’m really wanting to change the font on the menu bar buttons…i don’t seen this in your tutorial? or did i miss it?

  2. GREAT tutorial! Thank you. It’s worth noting that if make these changes in the Artisteer exports folder, that ANY theme you make and export will have these options!

    Also, in the code, the links to the Google Web Fonts (in options) and the link href (in the header) are messed up. Extra code that breaks the site. If you scroll up through I’m sure it’ll jump out at you.

  3. Thanks for the tutorial, but it’s not working!

    I’m getting: Parse error: syntax error, unexpected ‘”‘ in wp-content/themes/MYTHEME/header-font.php on line 23

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Artisteer

homemenu.png

A question was asked on creating a home image instead of a text link in the menu, using Artisteer Version 3 RC, this should not be hard to do so lets have a look at how we can achieve this. … Continue reading

Read More