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.
- Start the Edit Mode
- Click on the blue Add icon (Plus)
- Click on Fonts
Now you can choose between Google, Typekit, Fontdeck, System and Self-Hosted.
There is a difference between Web Font and Desktop Font.
A 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 specifically 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.
At Frontify, we are using Web Fonts.
If your company is not using an online font library such as Google or Typekit, you need to build a zip web font package and upload it over the Self-Hosted tab when picking a Fonts block. Building a font package means creating folder with fonts and css files that you will later compress into a zip file.
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.
Example of building a web font package and uploading it:
The font I want to use in Frontify is Montserrat Bold and Montserrat Light.
I have the following font files available.
- To start, create a new folder. Name it with name of your font.
- Create two subfolders in it, name them "fonts" and "css".
- Copy the font files to the subfolder called “fonts”.
- Now create a text file “fonts.css” in the “css” subfolder. This file will contain the CSS code needed to display the fonts in the browser.
Now you have the correct folder structure. It should look like this:
5. Add the CSS code to the“fonts.css” text file. The CSS code should look like below:
src: url("../fonts/montserrat-light-webfont.eot?#iefix") format("eot"),
src: url("../fonts/montserrat-bold-webfont.eot?#iefix") format("eot"),
At first, the code can look confusing. But we'll explain the structure:
@font-face font-family: "Montserrat";
The font-face is the name of the font-family.
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 file name "montserrat-light-webfont.eot"
The parameter ?#iefix is for solving issues with loading / displaying fonts in Internet Explorer browsers.
You can simply copy the example code to your “fonts.css” file and replace the font file names with yours.
!!! Make sure the files name is the same as the names of the files in the “fonts” folder. For example, the highlighted name corresponds to my font file montserrat-bold-webfont.eot :
!!! Make sure the source URL is correct. All the fonts files are in the “fonts” folder so the source has to specify that ../fonts/ path should be specified everywhere after url("
Please note that we do not recommend mixing different fonts in a single zip package.
6. 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:
You can now choose the Main Font and set up Content fonts.
In the Style Guide settings, go to Design and apply the font of your choice to the Style Guide:
Here you can change the Main Font by clicking and choosing your font.
You can also define different fonts for content that you can use when highlighting the text you are working with later on.
If you have any question, feel free to contact us over the chat in Frontify.