User Tools

Site Tools


google_web_fonts

Google Web Fonts

In the past, we were very limited in the fonts we could reasonably use in web-design, because if a visitor to our site did not have a particular font installed on their system, then they wouldn't be able to see it. Instead, the font would fallback to a backup font, or to a system default font-family.

But those days are behind us. The modern Web allows us to link to fonts online, so that visitors can see exactly the font we want them to, whether they've installed that font or not. One of the largest and most impressive collections of free web fonts is …

Google Web Fonts!

The site is well-organized and easy to use, and there are lots of fonts on tap. You can:

  • Browse and test fonts
  • Download fonts to your system
  • Embed fonts into your webpages

In this tutorial, I will show you how to easily implement Google Web Fonts in your TTG creations using PHPlugins.

Before getting started, you might like to take a look at the demonstration gallery, which shows off the end goal.

1. Find Your Font(s)

This is the most obvious step. Visit the Google Web Fonts library, browse the collection and determine which font(s) you'd like to use.

2. Download and Install Your Fonts

Here's a Lightroom Truth: the Web module preview cannot link to assets online. At least, not in any useful way. So to see the fonts in the Web module preview, we will need to have them installed on our system.

Google allows all of its fonts to be downloaded, so grab the files and install them as you would any other font.

3. Customize Your Font-families in Lightroom

With the fonts installed, you will now be able to use them in Lightroom's Web preview. First, select a likely candidate for your font-family:

You can author your own font-family entirely if you'd prefer. Just keep the following in mind:

  • If a font title is more than one word, the title must be wrapped in single-quotes, i.e. 'Times New Roman'.
  • A font-family should end with the name of a generic-family, like serif, sans-serif, cursive, fantasy, monospace.

For more information on writing font-families, see the W3C font-family document.

You should not necessarily need the fallback fonts, but they're good to have for users who may be visiting on older browsers. With font-family defined as above, we may now add our Google Web Font(s) to the front of our font-family list(s):

With the font visible in Lightroom's Web preview, adjust the font-size, color, etc. to taste.

Now, if you haven't already done so, Enable PHPlugins. That bit is important.

4. Write the PHPlugins function for online use

Export and upload your gallery. Now when you visit online, you will see your lovely fonts in action. The problem, though, is that you're the only one seeing them, because the fonts are installed on your system. We still need to make them Web Fonts so that everyone else can see them too. That's where PHPlugins enter the fray.

We need to link our Web Fonts in the head of our document, so we're going to use the ttg_head_end hook to attach the necessary code. The default phplugins.php file already includes a function for this hook, which enables custom CSS. We'll piggyback on that function and add the code for our Web Fonts.

In the phplugins.php file, you will find this example function:

/* DELETE THIS LINE
// CUSTOM STYLESHEET
// This function implements a custom stylesheet from which users may provide additional page styling or override existing styling set by the plugin
// Edit the custom.css file in /phplugins/css/ to define styles
// Serves as an example of a function being applied globally
function ttg_head_end( $style, $path ) { 
	echo '
	<link rel="stylesheet" href="/phplugins/css/custom.css" />
	';
} // END
DELETE THIS LINE */

To enable the function, remove the lines:

/* DELETE THIS LINE

and:

DELETE THIS LINE */

This will allow you to add a custom.css file to your site, in which you may specify custom styling information. See the Custom CSS tutorial if you need more information on that.

Now, let's home in on this bit, the function itself:

function ttg_head_end( $style, $path ) { 
	echo '
	<link rel="stylesheet" href="/phplugins/css/custom.css" />
	';
} // END

For each Web Font you want to include in your page, Google will show you a line of code that looks like this:

Copy-and-paste the code from under the “Standard” tab, show above, into the PHPlugins function:

function ttg_head_end( $style, $path ) { 
	echo '
	<link rel="stylesheet" href="/phplugins/css/custom.css" />

	<link href="http://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet" type="text/css">
	';
} // END

Do this for each of your Web Fonts.

The demonstration gallery for this tutorial uses several Web Fonts, so our end function looks like this:

function ttg_head_end( $style, $path ) { 
	echo '
	<link rel="stylesheet" href="/phplugins/css/custom.css" />

	<link href="http://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css">
	';
} // END

5. Override Existing Font-families via Custom CSS

If you've followed everyone above, then this next bit should be unnecessary. However, if you're implementing Web Fonts on PHPlugins-enabled pages that you've already published, then you may wish to perform the font-family overrides using custom CSS, rather than from within the Lightroom interface. For those of you who need it, this is the basic font-family override to use in the custom.css file:

html body {
	font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
	}

html h1, html .h1,
html h2, html .h2, 
html h3, html .h3, 
html h4, html .h4, 
html h5, html .h5, 
html h6, html .h6 {
	font-family: "Dancing Script", Futura, "Century Gothic", AppleGothic, sans-serif;
	}

html blockquote {
	font-family: "Droid Serif", Georgia, Times, "Times New Roman", serif;
	}

html pre,
html code,
html kbd,
html samp {
	font-family: "Droid Sans Mono", Consolas, "Lucida Console", Monaco, monospace;
	}

Those are the global overrides for the framework. If you want to target more specific areas – for example, image captions, or metadata on the thumbnail grid – you can identity those easily using your web-browser's developer tools. Good luck!

Selected Fonts

Here are some of my favorite finds on Google Fonts, categorized by the roles in which I find them most useful.

for Paragraphs, Lists, etc.

for Headings and/or Blockquotes

for Menus and/or Subtext (bylines, datelines, metadata, subheadings, etc.)

for Code (monospace)

for Fanciness

google_web_fonts.txt · Last modified: 2013/09/21 06:34 by admin