Support

Appearance, Upgrades

Custom Design » Custom Fonts

Custom Fonts are part of the Custom Design upgrade, at $30.00 per blog, per year, and it allows you to easily add Typekit fonts to your blog.

Custom Fonts has two modes: standard and advanced. In standard mode, you can use the Font Editor to customize the fonts on your blog in a matter of clicks — no coding required. The advanced mode is intended for those who want to add fonts to their blog using the Typekit Kit Editor. An understanding of CSS is required in order to use the advanced mode.

Getting Started with Standard Mode

To begin customizing your fonts using the standard mode, go to Appearance → Custom Design in your dashboard.

Then click on the Fonts tab:

The Font Editor allows you to select three fonts for your blog:

  • Site Title: Choose a font to use for the main title of your blog. If you are using a custom header or image logo for your blog, the site title may not apply.
  • Headings: Choose a font to use for all of the headings on your blog. Common examples of heading text includes post and page titles, widget titles, comment headers and headlines inside posts and pages.
  • Body Text: Choose a font to use for the main body text and for the menus on your blog.

Each time you select a font for each of the three areas above, the preview window will refresh so that you can see how that font will look on your current theme.

↑ Table of Contents ↑

Adjusting the Font Size and Style

Font style
You can adjust the style of your site title and heading fonts. To do so, find the small menu labeled “Style”, which appears just above each font selection menu.

Custom Fonts Style Menu

The available styles will vary depending on the font you have chosen.

Custom Font Style Options

Font size
To adjust the size of your fonts, locate the size controls, which are located just above each font selection menu, and to the right of the “Style” menu.

Custom Fonts Size

Click the “plus” button to increase the size, and click the “minus” button to decrease the size. As you click the “plus” or “minus” buttons, the current size will appear inside the small “Size” box.

Increasing the Font Size

Alternatively, you can increase or decrease the size by clicking inside the “Size” box and typing in your desired value:

Typing in Custom Font Size
For example, you can type “+3″ to make the font three times larger than the default. Typing “-3″ makes the font three times smaller than the base font size. Experiment until you find a size that looks just right!

↑ Table of Contents ↑

Saving Fonts

Once you are satisfied with your font selections, click the “Save” button. If you have not purchased the Custom Design upgrade, clicking the “Save” button will send you to the payment page. After your purchase is complete, your font selections will appear on your blog.

Note: it may take a few minutes for your fonts to show up on your blog after you save them.

↑ Table of Contents ↑

Changing Fonts

It’s easy to change your fonts after you have saved them. Simply go to Appearance → Custom Design in your dashboard. On the Custom Design welcome screen, you will now see a box containing your current fonts. To change your fonts, click either the “Change fonts” button or the “Fonts” tab:

You may now proceed to make your changes. When you are ready, click the “Save” button.

Note: it may take a few minutes for your fonts to show up on your blog after you save them.

↑ Table of Contents ↑

Advanced Mode

If you would like more control over how the fonts appear on your blog, you can use the Kit Editor at the Typekit website to create your own typographic treatments. The Advanced Mode requires a Typekit Kit ID. If you do not already have a Typekit Kit ID, you can create one by signing up for a Typekit account. After you sign up, you can find your Typekit Kit ID on typekit.com under Kit Editor → Embed Code:

Getting Started With Advanced Mode

To switch to Advanced Mode, click on the “Switch to advanced” button on the right of the Font Editor.

You will see the following page:

Enter your Typekit Kit ID into the box provided and click the “Save your Typekit ID” button. If you have already configured a kit at typekit.com, you will see a list of fonts that are currently in your kit.

If, after saving, you are prompted to publish your Typekit Kit ID at typekit.com, login to the Typekit website to create and publish a kit with the Kit Editor.

For more information on working with the Typekit Kit Editor and connecting your Typekit account to your WordPress.com blog, please refer to the documentation from Typekit.

Working with your Typekit fonts in Advanced Mode

After you have successfully configured your kit at typekit.com, return to the Font Editor and click the “Save Your Typekit ID” button. You should a list of fonts in the kit you have configured with the Typekit Kit Editor. It may take a few minutes for the fonts to appear on your blog.

Updating the Typekit fonts in Advanced Mode
To make changes to your fonts in advanced mode, login to typekit.com and edit your kit. Save your changes, and then return to the Font Editor in your WordPress.com dashboard. Click the “Save your Typekit ID” button and you should see your modified kit (it may take a few minutes).

For more help with Advanced Mode
For more details on the advanced mode, please refer to the documentation from Typekit.

Switching back to Standard Mode
You can switch back to the standard mode by clicking the “Switch to standard” link at the top right of the Font Editor.

Your blog will now use the fonts you were using previously in standard mode before you switched to advanced mode.

↑ Table of Contents ↑

Frequently Asked Questions

I’m already using Typekit fonts on my blog. How will the Custom Design upgrade affect me?
You can still make changes to your Typekit fonts, but only via the Typekit.com website — like before, as long as you don’t change your “Kit ID” — the number that ties your account to Typekit. If you want to change that later you’d need to upgrade, but you can leave it as is if you’re happy with your fonts and don’t mind managing them on Typekit.com. Purchasing the upgrade would give you access to the visual font preview and chooser tools, so you can apply the fonts right from your WP.com dashboard.

If you choose to stay as you are, you’ll be grandfathered in forever.

Will the fonts display in my language?
The best way to check if a particular font will display properly in any given language is to try that font out in the preview and see if the font changes from the theme default. Currently, no Asian languages are supported, and Cyrillic is supported in most, but not all, font families. Wider language support is an area that will continue to grow and improve in the future.

Still confused?

Contact support.