February 16, 2015

Nimble Design Lab: Applying Fonts - Beta

The Nimble Design Lab adds more easy to configure design options, including the option to apply a font from the Google Web Font library to different design elements.

This feature is in Beta and only available when creating a new design with the Nimble Design Lab. Join the Typepad Beta team to check out all the new features at Account > Summary.

Select A Font

First, you can select which font you wish to apply. Go to Design > Style for your blog and click the on Fonts heading in the right column. The Style settings will only be available when a design was created using the Nimble Design Lab.

Fonts Menu

Scroll through the fonts by choosing a category - Handwriting, Display, Serif, or Sans Serif - and using the arrows to navigate through the pages. If you don't see a font you like, you can import another font from the Google Fonts gallery.

A Serif font includes an extension on the stroke in a letter or symbol. A Sans Serif font does not include a serif. Sans Serif fonts are typically used for headings, whereas Serif fonts are commonly used for body text.

Click on any font to make it the Active Font. Only one font can be active at a time though you can use multiple fonts in your design.

Active Font

The Active Font font can be applied to any design element by clicking on the element in the preview to the left or using the menu below. Jump to the Apply Font section below for more details.

To change the Active Font, select a different font from the menu to replace the current selection or click the x next to the Active Font to have no active font.

Remove Font

Click to jump to the Apply Font instructions below.

Import Font

If you aren't seeing a font that meets your needs, you can browse the Google Fonts gallery and import another font.

  1. At Design > Styles, click the Fonts banner to open the options.
  2. Click IMPORT.
  3. Visit the Google Fonts gallery to choose your font and make note of the font name.
  4. At Typepad, enter the name of the font exactly as it appears at Google Fonts.
  5. Click the Import button and Typepad will look for the font. This can take a second.
  6. Once the font is found, you'll see the font listed below.
  7. Click on the font name to activate it and proceed with applying the font to elements of the design.

Additional details on importing fonts:

  • The name of the font in the Google Fonts gallery needs to match exactly in order for Typepad to find the correct font. For example, PT Sans Narrow will not be found if entered as PT Sansnarrow. If the font you entered is not found, double-check the font name in gallery.
  • You can import multiple fonts to apply to different elements of the design.
  • To remove an imported font, click the x next to in the font in the list.
  • If a font is not applied to an element, the font will be removed from the imported list when you leave the page.
  • An imported font applied to a design element will remain available as an imported font.

Apply Font

Once you have chosen a font, you can apply it to any design element by clicking on the element in the preview.

In the right column, you'll see the Active Font listed. Move your mouse to the design preview on the left, and the elements will be indicated by a red border. Click on the selected element to apply the font. In the below screenshot, the active font Open Sans has been applied by clicking on the blog name in the banner:

Apply Font to Blog Name

When the font has been applied, you'll see the font listed next to the element in the right column.

Applied Font

To remove the recently applied font, click the UNDO button next to the element.

The Active Font can be applied to other elements or you can switch to another active font by selecting a new font from the above menu.

In addition to applying the Active Font in the design preview, you can open the element options in the right column menu and click the Apply Font.

Apply Font

The current font can be changed by selecting a new Active Font and clicking on the design element to apply the new font.

Not quite what you are looking for? Check out these other articles:

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services