New installations of Textpattern CMS are styled with the Hive front-end theme. Phil Wareham, the core designer of the Textpattern team, has incorporated Google Fonts into the Hive theme and its evolution has been well-received overall. What works for one person may not work for another, however – there are no misconceptions that the Hive theme is a perfect for everyone. For today’s tip, I’m going to show you how to tweak the default theme and switch the Google Fonts selections to other typefaces. The idea behind this is you start thinking about what you want for your front-end theme, it’s a gentle introduction to more extensive changes as you become more familiar and confident with Textpattern.
Google Fonts is a useful playground to try out web fonts before you implement them. Using web fonts, you can offer a much wider range of typeface style to your site visitors – the trade-off is that there must be access to the Google Fonts site from the visitor end. If your Textpattern site is on an intranet with no external connection to Google Fonts, this won’t work for you. For the purpose of this example, I’m assuming you’re running Textpattern on your Arvixe web hosting and that access to Google Fonts is not blocked at your location.
The Hive theme uses PT Serif (https://www.google.com/fonts/specimen/PT+Serif) and Cousine (https://www.google.com/fonts/specimen/Cousine) fonts from Google Fonts. For the purposes of this example, I’m going to remove both PT Serif and Cousine, and select suitable replacements. PT Serif, as the name implies, is a serif typeface – which means it has a small line attached to the tail of symbols and characters. Cousine is a monospaced typeface and is typically used when fixed-width text is required, either for stylistic or interpretational reasons – like writing code, etc.
First off, I want to change the PT Serif references to a typeface that looks more handwritten. While I wouldn’t necessarily do this on a public site, it’s a visually striking way of showing the differences between fonts. Because it’s so striking, it may become a burden for your readers to process, so if you do decide to go down the route of changing to a handwritten font, use it appropriately.
I’ve chosen Rock Salt as the alternative to PT Serif, and Droid Sans Mono as the replacement for Cousine. To make the changes to the site, the following steps must be followed:
- make a backup of your stylesheet and page templates
- remove the references to PT Serif and Cousine in the page templates and stylesheets
- replace them with references to the new fonts
There are no fonts to upload, so everything can take place from the Textpattern administration area. I recommend making these changes in a text editor rather than straight in your browser – the benefits of having an external editor is that you can undo changes if you make a mistake, and save templates as text files before you start. Essentially, highlight the block of text you’re changing from the Textpattern window, copy it to your clipboard, paste it into your text editor, make the changes, copy the new version, paste it back into the browser and save your changes.
The stylesheet that loads the Google Fonts is located in the Textpattern page. Go to Presentation -> Pages, then select the default page. Copy the contents of the page to a text editor window and look for this line:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Serif:n4,i4,n7,i7|Cousine">
At the time of writing, it’s line #46 in the default page – these line numbers will differ between newer and older versions of Textpattern. Replace that text with this:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono|Rock+Salt' rel='stylesheet' type='text/css'>
Paste the updated page back into the browser window and save. Next, edit the archive page – do the same text replacement (it’s on line #35), saving your updated page in the browser as before. The last page to update is the error_default page – same replacement, but this time it’s on line #23. First stage is done.
Now, the stylesheet should be updated to reflect the new font choices. Go to Presentation -> Styles, then select the default stylesheet. Copy and paste this to your text editor. Now, the single reference to PT Serif should be switched to Rock Salt, and the reference to Cousine should be changed to Droid Sans Mono. On line #407 (at the time of writing), you will see:
font-family: "PT Serif", Georgia, serif;
Change this line to:
font-family: "Rock Salt", Georgia, serif;
Next, on line #512, you’ll see this:
font-family: Cousine, Consolas, "Lucida Console", Monaco, monospace;
Change that line to:
font-family: "Droid Sans Mono", Consolas, "Lucida Console", Monaco, monospace;
Notice how Cousine changes to “Droid Sans Mono”, complete with new punctuation – this is because of the space characters in the font title. Copy and paste your updated stylesheet back into the browser window and save your changes. View your website pages and article to see your font changes. In my case, here’s a before screenshot:
And here’s what it looks like now:
The body font is clearly different (I told you it was striking), but the monospaced font is more of a subtle change. Don’t like the new fonts? Well, you have options:
- restore the backup you made (paste the known-good text over the changes you made)
- look around Google Fonts some more and select other font choices
- grit your teeth and learn to love them