Using Google Webfonts with the “TheThe Photographer” WordPress Theme

In this tutorial video we’ll show you how to customize fonts for the TheThe Photographer portfoio and photoblogging theme.

View all videos about TheThe Photographer theme: TheThe Photographer WordPress Theme Series Playlist by TheTheFly YouTube Cannel

First, log in to your WordPress admin panel. In this example, the page is already loaded in another tab.

To get started, click TheTheFly tab on the left, then click the theme’s name to open its admin panel. Next, click the Fonts tab.

You can change the base font size by choosing a value from the drop-down menu at the top. Also in this tab, you’ll find a list of pre-designed typography schemes and a blank form to enter your own. To use any of these for your site, click the “Activate” button below the scheme.

For demonstration purposes, let’s change the font of the site name. This font will be used only if the graphic logo is removed. Go to General tab and check the box for Replace Logo With the Site Settings. Then click the Update Settings button and reload your home page in another tab. The theme will now use text in place of a logo. Now let’s change the site name’s font.

To use Google Web Fonts, visit google.com/webfonts and decide on the font you’d like to use. Click Add to Collection,” then Use. On the next page, you’ll see a box that reads, Add this code to your website. Copy that code and switch back to theme’s Fonts tab. Paste the code into the “Website Head Code” field, and click Update Settings. Then, return to the Google Web Fonts page and copy the CSS code from the very next box. Paste it into the custom font family you’d like to use. We don’t need the words, “font family,” so you can get rid of them and change the single quotes to double. Complete the font “stack” by pasting a few backup fonts from another set after the first one in your custom set. This ensures that if a browser doesn’t recognize a font, it will use the next one in line instead so visitors can still read the text. We recommend using “Web-safe” fonts that are recognized by most browsers.

Note that you don’t have to fill in all the fields in the custom form, just the ones you want to look different from the default.

Click Activate, then switch back to your front page and reload it. You can now see your site name displayed in the new font.

Note that you don’t have to fill in all the fields in the custom form, just the ones you want to look different from the default.

Here are a few last tips:

• Try not to use a lot of different fonts on one website. One to two fonts are usually enough to get the job done.

• Combine serif and sans-serif fonts for a varied appearance.

• Google Web Fonts can slow your website down if you use a lot of them, so limit yourself to one or two.

• The best use of Google Web Fonts is for your site name (if you’re not using a logo) or your site’s headings.

• If you’ve loaded a Google Web Font and then decided against using it, don’t forget to delete its code from your admin panel or it will slow your site down.