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 …

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.

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.

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.

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:

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.