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 font you would like to use on your site.
  2. Click the red + icon next to the font you’d like to use:
  1. Once selected, a popup will appear in the bottom right corner with the label “X Families Selected”. Click on this popup, and click Customize to pick specific font weights to use:
  1. 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 finished, click Embed to get the code for your font:
  1. Copy this code in its entirety.
  2. On your site, navigate to Customize → Typography.
  3. 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 or sans-serif. 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 or sans-serif. 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 or sans-serif. 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 are a Newspack customer, contact us to add a self-hosted web font.


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 or sans-serif. 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.’: