The Newspack Themes allow you to change the fonts used for the headers and body text. It includes built-in support for Google Fonts, Hoefler & Co. and Typekit (the latter two require paid accounts).

Although there is not an interface for it yet, it’s also possible to upload and use websafe font files. Newspack customers can contact support for assistance.


Theme default fonts

The default fonts currently used by each theme are as follows:

Newspack theme:

  • Headers: Sans-serif system font — depending on what’s available on a visitors computer, it may use Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, or Helvetica Neue.
  • Body: Serif system font — depending on what’s available, it may use Georgia, Garamond, or Times New Roman.

Newspack Joseph:

Newspack Katharine:

Newspack Nelson:

  • Header: Montserrat
  • Body: Headers: Sans-serif system font — depending on what’s available on a visitors computer, it may use Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, or Helvetica Neue.

Newspack Sacha:

  • Headers: IBM Plex Serif
  • Body: Serif system font — depending on what’s available, it may use Georgia, Garamond, or Times New Roman.

Newspack Scott:

  • Headers: Fira Sans Condensed
  • Body: Serif system font — depending on what’s available, it may use Georgia, Garamond, or Times New Roman.

Adding a Google Font

When using a third-party hosted font, like Google Fonts, loading several font files can slow down your site. It’s important to only select fonts that you actually need.

To select a font from Google fonts:

  1. Navigate to https://fonts.google.com/, and pick a typeface you would like to use on your site.
  2. Once you’ve picked your typeface, click on it to see all options for it:
  1. This will bring you to a full list of the typeface’s different styles and weights:
  1. Click “Select this style” next to each style and weight you would like to use on your site.Typically you will want to check a regular weight, (400), the same regular weight in italic, a bold weight (700-900) and the same bold weight in italic. This makes sure your site has all the font types it might need for the theme’s styles, without loading unnecessary files.
  2. Once you’ve selected at least one style, a panel will open on the right. It will include a list of all the fonts you’ve selected so far, and the code needed to use them on your site:
  1. Once you’re done picking fonts, copy the second <link> in the right-hand panel:
  1. On your site, navigate to Customize > Typography.
  2. Paste the copied embed code into the Font Provider Import Code or URL field, or the Secondary Font Provider Import Code or URL field:
  1. Apply this font to your site’s Headers or Body text by adding its name to either the Header or Body fields. You can also change the fallback font stack to match the style of your selected font, either serif, sans-serif, display, or monospace. This means if there is ever an issue loading your font, the site will use a fallback that’s similar in style:
  1. Click Publish to save your changes.

Adding a cloud-hosted font from Hoefler & Co.

Note: To use Hoefler & Co’s cloud hosted webfonts, you need one of their paid Cloud.typography accounts.

When using a third-party hosted font, like Hoefler & Co., loading several font files can slow down your site. It’s important to only select fonts that you actually need.

  1. Navigate to Hoefler & Co’s user guides, and follow their steps for creating a new project with the fonts you would like to use.
  2. Next, follow the steps in the using projects part of their guide to find and copy the CSS Key for your project. It will look something like <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/xxxxxx/xxxxx/css/fonts.css" />
  3. On your site, navigate to Customize > Typography.
  4. Paste the copied embed code into the Font Provider Import Code or URL field, or the Secondary Font Provider Import Code or URL field:
  1. Apply this font to your site’s Headers or Body text by adding its name to either the Header or Body fields, using the syntax from Hoefler & Co.’s using projects documentation — unlike other providers, it will instruct you to list two fonts, one with a “A” and one with a “B”. You can also change the fallback font stack to match the style of your selected font, either serif, sans-serif, display, or monospace. This means if there is ever an issue loading your font, the site will use a fallback that’s similar in style:
  1. Click Publish to save your changes.

Adding a webfont from Typekit

Note: To use Adobe’s Typekit webfonts, you need one of their paid Creative Cloud accounts.

When using a third-party hosted font, like Typekit, loading several font files can slow down your site. It’s important to only select fonts that you actually need.

  1. Navigate to Adobe Typekit’s user guides, and follow the instructions to choose a font and create a web project.
  2. Copy the embed code generated for your font choices — it will look something like: <link rel="stylesheet"href="https://use.typekit.net/xxxxxxx.css">
  3. On your site, navigate to Customize > Typography.
  4. Paste the copied embed code into the Font Provider Import Code or URL field, or the Secondary Font Provider Import Code or URL field:
  1. Apply this font to your site’s Headers or Body text by adding its name to either the Header or Body fields, using the formatting suggested by Adobe (lowercase, no spaces, with individual words separated by a dash). You can also change the fallback font stack to match the style of your selected font, either serif, sans-serif, display, or monospace. This means if there is ever an issue loading your font, the site will use a fallback that’s similar in style:
  1. Click Publish to save your changes.

Adding a self-hosted web font

If you’re using a self-hosted web font, it will need to be uploaded to the site via FTP; Newspack customers can contact their TAMs to get their fonts uploaded.

Once uploaded, the font will need to be added to the site using @font-face, like the example below:

@font-face{
	font-family: 'FontName';
	src: url('/path-to-font-file.ttf');
}

AMP strips out most external stylesheets (outside of using link for some third-party font providers), so self-hosted web fonts can’t be loaded using @import.


Adding a system font

To use a system font — one that is commonly available on most computers already — follow these steps:

  1. On your site, navigate to Customize > Typography.
  2. Apply the font to your site’s Headers or Body text by adding its name to either the Header or Body fields. You can also change the fallback font stack to match the style of your selected font, either serif, sans-serif, display, or monospace. This means if there is ever an issue loading your font, the site will use a fallback that’s similar in style:

There are a number of resources online, like cssfontstack.com, that will help you check the availability of system fonts, to help you make good decisions about which to choose.


Using all-caps for accent text

The Newspack Themes use all-caps text on some elements to help them stand out. Some example include the Homepage Posts headers, menus, or categories.

You can turn these off by navigating to Customize > Typography, and unchecking ‘Use all-caps for accent text.’: