To use your own font in Frontify, you only have to pay attention to a few things.
Your font must be uploaded to Frontify. This is possible via the so-called Font Block.

  1. Start the Edit Mode 
  2. Click on the blue Add icon (Plus)
  3. Click on Fonts

Now you can choose between Google, Typekit, Fontdeck, System and Self-Hosted.

Please be aware that there is a difference between Web Font and Desktop Font.

The main difference between a Desktop Font and a Web Font is that the Desktop Font is designed to be installed on your computer and is ready for use in applications also installed on your system (like Word, Keynote…) They usually have a .otf or .ttf extension corresponding with OpenType, TrueType or PostScript.

On the other hand, a Web Font is a font especially designed for use in web pages, and is loaded with CSS @ font-face declaration. This makes the user’s browser downloads web fonts and renders text correctly.

In the case of Frontify, we are using Web Fonts.

If your company is not using an online font library such as Google or Typekit, you will have to build and upload a zip web font package over the tab Self-Hosted.

In most cases, you will have different file types of your font: like EOT, SVG, TTF, WOFF or WOFF2. This is necessary to show the font in the various browsers. All these file types will go into a zip file.

Let me give you an example:

My font I want to use in Frontify is Montserrat Bold and Montserrat Light.

I have the following font files available.

montserrat-bold-webfont.eot
montserrat-bold-webfont.svg
montserrat-bold-webfont.ttf
montserrat-bold-webfont.woff
montserrat-bold-webfont.woff2

montserrat-light-webfont.eot
montserrat-light-webfont.svg
montserrat-light-webfont.ttf
montserrat-light-webfont.woff
montserrat-light-webfont.woff2

  1. To start, create a new folder. Then, you create two subfolders in it named fonts and css.
  2. Copy the font files to the subfolder called fonts.
  3. Now create a text file fonts.css in the css subdirectory. This file shall contain the CSS code needed to display the fonts in the browser.

    The CSS code should look like below. At first, the code looks very confusing. But I'll explain the structure.

@font-face  font-family: "Montserrat";
The font-face is the name of the font-family.

src: url("../fonts/montserrat-light-webfont.eot?#iefix");
The source URL specifies where exactly in the folder the font file can be found.
In our example, it will be found in the subfolder "fonts" and having the filename "montserrat-light-webfont.eot"
The parameter ?#iefix is for solving issues with loading / displaying fonts in Internet Explorer browsers.

______________________________________________________

@font-face {
       font-family: "Montserrat";
src: url("../fonts/montserrat-light-webfont.eot?#iefix");
src: url("../fonts/montserrat-light-webfont.eot?#iefix") format("eot"),
       url("../fonts/montserrat-light-webfont.woff2") format("woff2"),
       url("../fonts/montserrat-light-webfont.woff") format("woff"),
       url("../fonts/montserrat-light-webfont.ttf") format("truetype"),
       url("../fonts/montserrat-light-webfont.svg") format("svg");
font-weight: 400;
font-style: normal;

}

@font-face {
       font-family: "Montserrat";
src: url("../fonts/montserrat-bold-webfont.eot?#iefix");
src: url("../fonts/montserrat-bold-webfont.eot?#iefix") format("eot"),
       url("../fonts/montserrat-bold-webfont.woff2") format("woff2"),
       url("../fonts/montserrat-bold-webfont.woff") format("woff"),
       url("../fonts/montserrat-bold-webfont.ttf") format("truetype"),
       url("../fonts/montserrat-bold-webfont.svg") format("svg");
font-weight: 700;
font-style: normal;
}

______________________________________________________


You are welcome to use this code and simply replace the file names of the fonts with yours.

Now you have the correct folder structure.
It looks like this:

Please note that we do not recommend mixing different fonts in a single zip package.


4. Now zip the files and upload it in the self-hosted tab.

That`s it.  Your Font is now uploaded in Frontify and ready to use...
for example in the style guide header or in the content.

Here you can change the font by clicking and choosing your font.

If you have any question, feel free to contact us over the chat in Frontify.


Did this answer your question?