NOTE: This recipe has been totally revised to fix some issues with the way Google expects to receive font information.
Thanks to Google, you’re not stuck with designing your site with only a standard font set and creating images for any
other fonts that you need to utilize. They’ve developed an API that allows you to download fonts for your sites on the
fly. At this writing Google lists over 400 web fonts to choose from. You can see the complete list at:
http://www.google.com/webfonts
A sample set of files, including a fonts.ini.php schema preset file, a css.php file and a viewer file can be downloaded
from:
http://www.thecmsbcookbook.com/downloads/googlefonts.zip
NEW EDITOR
To implement the font.api, first create a multi-record editor called “Google Font Names” with only one text field
called “Name”.
***NOTE: Make sure that you check "Don't allow removing records" under the "advanced" tab.
Then create a single record editor called “fonts” with sets fields for each css font class that you want to create.
Each set has
1) A pull down list field for the font name that gets its options from the database Google Font Names, (option values
from the “num” field, option labels from the “name” field)
2) A text field for color
3) A test field for size
4) A list field for style with the pull down values normal, bold, and italic.
NOTE: When entering the Google font names in the editor, if there's a space between some of the words, leave those
space, and if some of the words in the font name are capitalized, make sure you enter them as capitals. Specific font
styles may have a colon and 3 digits following the name (Merriweather Sans:300 is the lighter weight version of the
Merriweather Sans font.). Include that as well or the normal font weight for that font will be used.
CSS.PHP CODE
Now create a font_sample.css.php file with your css classes. Here’s the class “text” as an example. It uses Arial,
Black, .9em, normal as the fallback where a specific font is not defined.
The preg_replace code strips any font weight designations from the end of font names, to conform with Google's coding
requirements for the style sheet:
NOTE: If you’re not sure how to create a css stylesheet that pulls it’s data from a CMSB section, take a look at the
recipe called: “USING CMSB TO POPULATE A CSS STYLESHEET”
<?php $fontsRecord['text_font:label'] = preg_replace("/[0-9:]/", "", $fontsRecord['text_font:label']); ?>
..text_font {
font-family: "<?php if ($fontsRecord['text_font']): ?><?php echo $fontsRecord['text_font:label'] ?>", san-serif;<?php
else: ?>Arial", san-serif;<?php endif ?> <?php if ($fontsRecord['text_font_size']): ?>font-size:<?php echo
$fontsRecord['text_font_size'] ?>em;<?php else: ?>font-size: .9em;<?php endif ?> <?php if
($fontsRecord['text_font_color']): ?>color:#<?php echo $fontsRecord['text_font_color'] ?>;<?php else:
?>color:#000000;<?php endif ?> <?php if ($fontsRecord['text_font_style']): ?>font-style:<?php echo
$fontsRecord['text_font_style'] ?>;<?php else: ?>font-style: normal;<?php endif ?>
}
You can add or change the classes to suite your needs or working style.
VIEWER CODE
At the top of your viewer, add the load records call for the new fonts editor.
<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/your_server_path/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
// load records
list($google_font_namesRecords, $google_font_namesMetaData) = getRecords(array(
'tableName' => 'google_font_names',
));
?>
Then in the head section, add:
<link rel="stylesheet" type="text/css" href="font_sample.css.php" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php
$output = '';
foreach ($google_font_namesRecords as $record) { $record['name'] = preg_replace("/[, ]/", "+", $record['name']);
$output .= $record['name'] . "|";
}
$output = rtrim($output,"|"); // remove trailing pipe
print $output;
?>">
Now, just call your CSS classes the way you normally would, and the content should appear in the selected fonts, sizes
and styles.
Here's some simple code that you can put in the body of your test viewer, or you can use your own.
<div align="center" class="masthead_font">Masthead Font Sample</div>
<div align="center" class="navigation_font">Navigation Font Sample</div>
<div align="center" class="heading_font">Heading Font Sample</div>
<div align="center" class="sub_heading_font">Sub heading Font Sample</div>
<div align="center" class="text_font">Text Font Sample</div>
<div align="center" class="small_text_font">Small Text Font Sample</div>
<div align="center" class="tiny_text_font">Tiny Text Font Sample</div>
If you want to implement any of the new CSS3/HTML5 text effects, you can add them to the CSS style sheet.
Here's an example using drop shadow glow around a masthead font. using a combination of 4 text shadow styles.
NOTE: You'll have to add a field called masthead_font_shadow_color to your "Fonts" editor
.masthead_font {
font-family: "<?php if ($fontsRecord['masthead_font']): ?><?php $fontsRecord['masthead_font:label'] =
preg_replace("/[0-9:]/", "", $fontsRecord['masthead_font:label']); ?><?php echo $fontsRecord['masthead_font:label']
?>";<?php else: ?>Verdana", san-serif;<?php endif ?> text-shadow: -1px -1px 1px #<?php echo
$fontsRecord['masthead_font_shadow_color'] ?>, 1px -1px 1px #<?php echo $fontsRecord['masthead_font_shadow_color'] ?>,
-1px 1px 1px #<?php echo $fontsRecord['masthead_font_shadow_color'] ?>, 1px 1px 1px #<?php echo
$fontsRecord['masthead_font_shadow_color'] ?>; letter-spacing:3.5px; <?php if ($fontsRecord['masthead_font_size']):
?>font-size:<?php echo $fontsRecord['masthead_font_size'] ?>em;<?php else: ?>font-size: 1.5em;<?php endif ?> <?php if
($fontsRecord['masthead_font_color']): ?>color:#<?php echo $fontsRecord['masthead_font_color'] ?>;<?php else:
?>color:#000000;<?php endif ?> <?php if ($fontsRecord['masthead_font_style']): ?>font-style:<?php echo
$fontsRecord['masthead_font_style'] ?>;<?php else: ?>font-style: normal;<?php endif ?>
}
Here's an implementation of a rollover effect using the text shadow effect.
NOTE: In addition to the font name, font size, and any other fields that you're using, you'll have to add 3 specific
fields to your "Fonts" editor. navigation_font_normal_color, navigation_link_shadow_color and
navigation_font_rollover_color
a.navigation:link {font-family: "<?php if ($fontsRecord['navigation_link_font']): ?><?php echo
$fontsRecord['navigation_link_font:label'] ?>", san-serif;<?php else: ?>Verdana", san-serif;<?php endif ?> text-shadow:
-1px -1px 1px #<?php echo $fontsRecord['navigation_link_shadow_color'] ?>, 1px -1px 1px #<?php echo
$fontsRecord['navigation_link_shadow_color'] ?>, -1px 1px 1px #<?php echo $fontsRecord['navigation_link_shadow_color']
?>, 1px 1px 1px #<?php echo $fontsRecord['navigation_link_shadow_color'] ?>; text-decoration: none; border: none; <?php
if ($fontsRecord['navigation_link_font_size']): ?>font-size:<?php echo $fontsRecord['navigation_link_font_size']
?>em;<?php else: ?>font-size: 1.0em;<?php endif ?>; color:#<?php if ($fontsRecord['navigation_font_normal_color']):
?><?php echo $fontsRecord['navigation_font_normal_color'] ?><?php else: ?>000000<?php endif ?>;}
a.navigation:visited {font-family: "<?php if ($fontsRecord['navigation_link_font']): ?><?php echo
$fontsRecord['navigation_link_font:label'] ?>", san-serif;<?php else: ?>Verdana", san-serif;<?php endif ?> text-shadow:
3px 3px 2px #<?php echo $fontsRecord['navigation_link_shadow_color'] ?>; text-decoration: none; border: none; <?php if
($fontsRecord['navigation_link_font_size']): ?>font-size:<?php echo $fontsRecord['navigation_link_font_size'] ?>em;<?php
else: ?>font-size: 1.0em;<?php endif ?>; color:#<?php if ($fontsRecord['navigation_font_normal_color']): ?><?php echo
$fontsRecord['navigation_font_normal_color'] ?><?php else: ?>000000<?php endif ?>;}
a.navigation:hover {font-family: "<?php if ($fontsRecord['navigation_link_font']): ?><?php echo
$fontsRecord['navigation_link_font:label'] ?>", san-serif;<?php else: ?>Verdana", san-serif;<?php endif ?> text-shadow:
-1px -1px 1px #<?php echo $fontsRecord['navigation_link_shadow_color'] ?>, 1px -1px 1px #<?php echo
$fontsRecord['navigation_link_shadow_color'] ?>, -1px 1px 1px #<?php echo $fontsRecord['navigation_link_shadow_color']
?>, 1px 1px 1px #<?php echo $fontsRecord['navigation_link_shadow_color'] ?>; text-decoration: none; border: none; <?php
if ($fontsRecord['navigation_link_font_size']): ?>font-size:<?php echo $fontsRecord['navigation_link_font_size']
?>em;<?php else: ?>font-size: 1.0em;<?php endif ?>; color:#<?php if ($fontsRecord['navigation_font_rollover_color']):
?><?php echo $fontsRecord['navigation_font_rollover_color'] ?><?php else: ?>000000<?php endif ?>;}
a.navigation:active {font-family: "<?php if ($fontsRecord['navigation_link_font']): ?><?php echo
$fontsRecord['navigation_link_font:label'] ?>", san-serif;<?php else: ?>Verdana", san-serif;<?php endif ?> text-shadow:
3px 3px 2px #<?php echo $fontsRecord['navigation_link_shadow_color'] ?>; text-decoration: none; border: none; <?php if
($fontsRecord['navigation_link_font_size']): ?>font-size:<?php echo $fontsRecord['navigation_link_font_size'] ?>em;<?php
else: ?>font-size: 1.0em;<?php endif ?> color:#<?php if ($fontsRecord['navigation_font_normal_color']): ?><?php echo
$fontsRecord['navigation_font_normal_color'] ?><?php else: ?>000000<?php endif ?>;}
You can find some other cool effects in the article by Daniels Mekšs at
http://www.1stwebdesigner.com/css/css3-text-effects-typography/
|
