User Tools

Site Tools


phplugins_google_fonts

Google 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.

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 source of such fonts is …

Google 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 Fonts in CE4 via PHPlugins.


1. Find Your Font(s)

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

2. Download and Install Your Fonts

It's no good telling Lightroom to pull assets from online, so to view the fonts in the Web module's preview, it's best to have them installed on your 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 thing, use the plugin's preset font-families to choose some reasonable typefaces:

While all modern browsers support web fonts, it's good to have these fallbacks for older browsers that don't support the @font-face property.

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.

With font-family defined as above, we may now add our chosen Google Font(s) to the front of our font-family:

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 href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="/phplugins/css/custom.css" />
	';
} // END

5. Override Existing Font-families via Custom CSS

If you've followed everything 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, you can raid our CE4 Typography Template to implement changes.

For example, you might update the body text to use the Open Sans font:

body {
	font-family: 'Open Sans', 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
	}

But like I said, if you wrote your fonts into Lightroom as in Step 3 above, then this additional work should be unnecessary.

phplugins_google_fonts.txt · Last modified: 2014/08/16 07:15 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.