Skip to main content
Skip table of contents

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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.