Introduction

Add Google Web Fonts to your web site by adding the fonts you want into a page attribute. You then only need to tell a block to use the new font using CSS, and ta-da you are using a high-quality font without futher edits to your theme.

To make this work you will need a basic understanding of HTML, CSS and Concrete5 theme editing.

View the related how-to on using Google Web Fonts normally

Steps to follow

A. Create the page attribute

1. Go to Pages and Themes > Attributes

2. Add a new 'Text' attribute:

• Handle = 'google_web_fonts'

• Name = 'Google Web Fonts'

B. Assign Google Web Fonts to a Page

3. Go to the Site Map

4. Bring up the Properties of the selected page

5. Page Properties > Custom Attributes > Select 'Google Web Fonts'

6. Add the web font(s) you want (In this example I am using 'Chewy')

   Note: Multiple fonts should be comma seperated and a link to font directory can be found at the bottom of this how-to.

C. Add PHP code to theme

7. Add the following code to you theme before the close of head element:

`

$strFonts = $c->getCollectionAttributeValue('google_web_fonts');

$arrFonts = explode(',',$strFonts);

$numFonts = count($arrFonts);


$strGoogleFonts = '';


if ($numFonts > 0) {

    for ($i=0; $i<$numFonts; $i++) {

        $strFont = trim($arrFonts[$i]);

        if (!empty($strFont)) { $strGoogleFonts .= $strFont . '|'; }

    }

}

$strGoogleFonts = str_replace(' ','+',$strGoogleFonts);  // Replace spaces with pluses



if ('|' == substr($strGoogleFonts, -1)) { $strGoogleFonts = substr($strGoogleFonts, 0, -1); }  // Remove trailing pipe


if (!empty($strGoogleFonts)) {

    echo '<link rel=\"stylesheet\" type=\"text/css\" href=\"http://fonts.googleapis.com/css?family='.$strGoogleFonts.'\" />' . \"\n\";

}

`

8. Upload your amended theme files to your web server

D. Style your block(s)

9. Edit the page you have added the Google Web Fonts page attribute to

10. Select 'Design' on the block you want to change the fonts to

11. Select the 'CSS' tab and enter the following into 'Additional CSS': "font-family: Chewy, serif;" (Note: Replace 'Chewy' with whatever Google Web Font you are downloading)

12. Exit and Save changes

There are other ways of setting CSS styles to make it easier select which fonts to use, but I am not covering that here.

Enjoy using some fun fonts!