Using your own Custom Font

by Zaid Daba'een

Branding makes a memorable impression of your company, it sets you apart from your competitors and it expresses your business values.

While on DeveloperHub.io you can use any Google font available as described here, Google fonts might not have a great alternative for your brand's font. In such a case, it is best to setup your documentation platform to use your custom font.

How to setup Custom Font?

To use your own font on DeveloperHub.io, your webserver should serve that font for your documentation portal. This takes four steps:

  1. Setting up your webserver to serve the font.
  2. Allowing access to your documentation host, whether it's a custom domain or a subdomain under DeveloperHub.io.
  3. Creating a CSS file that imports the font styles.
  4. Loading the CSS file in DeveloperHub.io using Custom CSS.

Let's go through these step by step.

Setting up your Webserver to Serve the Font

Depending on your webserver, your configuration might be different, or this step might be unneeded. We'll consider apache and nginx webservers for examples.

nginx

Under /etc/nginx, edit mime.types. Depending on the font types you want to use, add the following to the file.

font/ttf                         ttf;
font/otf                         otf;
font/woff                        woff;
font/woff2                       woff2;
mime.types

Test your nginx configuration using nginx -t.

apache

In your .htaccess file, add these lines depending on the font type you want to use.

AddType font/ttf                         ttf
AddType font/otf                         otf
AddType font/woff                        woff
AddType font/woff2                       woff2
.htaccess

Allow Access

Allowing access is done by configuring the server to serve the font files for a specific domain through CORS.

The server to be edited here is where your font files are usually used. This could be your landing page server, or your app server, or a specific fonts server.

nginx

Edit your server configuration, typically under the folder /etc/nginx/sites-enabled/. Add a location block:

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin docs.pied-piper.com;
}

Make sure to change docs.pied-piper.com to your documentation host or subdomain under DeveloperHub.io.

apache

Edit your .htaccess configuration file. Add the following rule:

<FilesMatch ".(eot|ttf|otf|woff|woff2)">
  Header set Access-Control-Allow-Origin "docs.pied-piper.com"
</FilesMatch>

Create CSS File

A CSS file will be used to import the styles. Create this CSS file and host it on the same server where you allowed access. This example provides comprehensive font styles having weights from 100-900 for normal and italic. Edit it as required. You might as well change the URL parameter to include full URL.

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 100;
  src: url("font-files/Xyz-Thin.woff2") format("woff2"),
       url("font-files/Xyz-Thin.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 100;
  src: url("font-files/Xyz-ThinItalic.woff2") format("woff2"),
       url("font-files/Xyz-ThinItalic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 200;
  src: url("font-files/Xyz-ExtraLight.woff2") format("woff2"),
       url("font-files/Xyz-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 200;
  src: url("font-files/Xyz-ExtraLightItalic.woff2") format("woff2"),
       url("font-files/Xyz-ExtraLightItalic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 300;
  src: url("font-files/Xyz-Light.woff2") format("woff2"),
       url("font-files/Xyz-Light.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 300;
  src: url("font-files/Xyz-LightItalic.woff2") format("woff2"),
       url("font-files/Xyz-LightItalic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 400;
  src: url("font-files/Xyz-Regular.woff2") format("woff2"),
       url("font-files/Xyz-Regular.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 400;
  src: url("font-files/Xyz-Italic.woff2") format("woff2"),
       url("font-files/Xyz-Italic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 500;
  src: url("font-files/Xyz-Medium.woff2") format("woff2"),
       url("font-files/Xyz-Medium.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 500;
  src: url("font-files/Xyz-MediumItalic.woff2") format("woff2"),
       url("font-files/Xyz-MediumItalic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 600;
  src: url("font-files/Xyz-SemiBold.woff2") format("woff2"),
       url("font-files/Xyz-SemiBold.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 600;
  src: url("font-files/Xyz-SemiBoldItalic.woff2") format("woff2"),
       url("font-files/Xyz-SemiBoldItalic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 700;
  src: url("font-files/Xyz-Bold.woff2") format("woff2"),
       url("font-files/Xyz-Bold.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 700;
  src: url("font-files/Xyz-BoldItalic.woff2") format("woff2"),
       url("font-files/Xyz-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 800;
  src: url("font-files/Xyz-ExtraBold.woff2") format("woff2"),
       url("font-files/Xyz-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 800;
  src: url("font-files/Xyz-ExtraBoldItalic.woff2") format("woff2"),
       url("font-files/Xyz-ExtraBoldItalic.woff") format("woff");
}

@font-face {
  font-family: 'Xyz';
  font-style:  normal;
  font-weight: 900;
  src: url("font-files/Xyz-Black.woff2") format("woff2"),
       url("font-files/Xyz-Black.woff") format("woff");
}
@font-face {
  font-family: 'Xyz';
  font-style:  italic;
  font-weight: 900;
  src: url("font-files/Xyz-BlackItalic.woff2") format("woff2"),
       url("font-files/Xyz-BlackItalic.woff") format("woff");
}

We'll assume that this file now lives in fonts.pied-piper.com/font.css.

Load CSS file in DeveloperHub.io

To load the CSS file, simply add the following CSS using Custom CSS tool.

@import url('https://fonts.pied-piper.com/font.css');

:root {
    --font: "Xyz" !important;
}