To use your own font in Frontify, your font must be uploaded to Frontify. This is possible via the Font Block.
Start the Edit Mode
Click on the Add icon (+)
Click on Fonts
Now you can choose between Google, Adobe Font, System, and Self-Hosted.
Web Fonts vs. Desktop Fonts
There is a difference between Web Fonts and Desktop Fonts.
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 use Web Fonts.
If your company does not use an online font library such as Google or Adobe Fonts, 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 a folder with fonts and CSS files that you will later compress into a zip file.
The use of EOT and SVG font files is optional. They are no longer required.
In most cases, you will have different file types of your font: 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.
montserrat-bold-webfont.ttf
montserrat-bold-webfont.woff
montserrat-bold-webfont.woff2
montserrat-light-webfont.ttf
montserrat-light-webfont.woff
montserrat-light-webfont.woff2
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:
@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;
}
______________________________________________________
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.
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 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 them 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 Guidelines settings, go to Design and apply the font of your choice to your Guidelines:
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.