Fonts

Index

• @font-face
• Change only post and page title font family

---

@font-face

Example of the styles needed for a single type of font file:

@font-face {
  font-family: "FontName";
  src: url("/wp-content/uploads/fonts/FontName-Regular.otf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FontName";
  src: url("/wp-content/uploads/fonts/FontName-RegularItalic.otf");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: "FontName";
  src: url("/wp-content/uploads/fonts/FontName-Bold.otf");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

Example of the styles needed for multiple font file extensions per font:

@font-face {
  font-family: "FontName";
  src: url("/wp-content/uploads/fonts/FontName-Regular.woff2") format("woff2"),
       url("/wp-content/uploads/fonts/FontName-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FontName";
  src: url("/wp-content/uploads/fonts/FontName-RegularItalic.woff2") format("woff2"),
       url("/wp-content/uploads/fonts/FontName-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "FontName";
  src: url("/wp-content/uploads/fonts/FontName-Bold.woff2") format("woff2"),
       url("/wp-content/uploads/fonts/FontName-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

---

Change only post and page title font family

The Newspack theme includes two fields to set fonts used on the site: Headings and Body. The Headings field is used in a lot of other locations, like the site header and widgets. In some cases, you may want to use a more decorative font for the headlines, and not have that used for the navigation.

The following CSS can be used to help you set a different font for only post and page titles:

.entry-title,
.page-description {
   font-family: 'Playfair Display', serif;
}