Add Custom Fonts

Custom fonts elevate your brand identity and inject personality into your site.

Self-Hosted Fonts From a Remote Server

Viewport’s custom CSS lets you incorporate unique fonts that represent your brand.

You can host your font files either on your own physical server, shared hosted server, a content delivery network (CDN) or even a site set up with Github pages.

Here is a simplified recipe for using self-hosted fonts in your custom CSS:

CSS

@font-face {
  font-family: "My Custom Font";
  /* Check out the supported formats: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#font_mime_types */
  src: url("https://example.com/fonts/BrandVoice.woff") format("woff");
}

:root {
  /* Always use your font with a fallback like serif or sans-serif */
  --vpt-theme-text-font: "My Custom Font", sans-serif;
}

For more information around the @font-face rule check out MDN Web docs.

External Font Services

There are several font services on the market — like Google Fonts, Adobe Fonts and Font Squirrel, to just name a few — that offer large collections of free or paid fonts. You can easily reference those fonts in a website.

CSS

/* Import the font from e.g. Google Fonts */
/* Under the hood these services also use the @font-face rule to reference individual font files */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400");

:root {
  --vpt-theme-headline-font: "Playfair Display", serif;
}

Integrating external fonts involves data privacy considerations. Review the service's privacy policy and ensure alignment with your website's data governance.