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), uploading it to the Viewport or even a site set up with Github pages.

Here is a simplified recipe for using self-hosted fonts in your custom 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");
}

If you are using Help Center theme, the code is added to the custom.css file in theme settings. In an example below, the font has been uploaded directly to Viewport.

If you are using WebHelp or custom theme, you are not limited to custom.css, and you need to find an appropriate place to put the code.

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.

/* 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.