How to Set Custom Font on a Page

In this article, we will walk through the whole process of connecting your own custom fonts step by step on a page created in the page designer.

To connect the font of your choice, we will go through the following sequence of steps:

1. Font formats

2. Uploading a font to the File Storage

3. Creating a CSS block with a font

  3.1 Properties for loading a font

  3.2 Font path template

4. Connecting a font to a specific heading

5. Connecting a font to the entire page

Different browsers have their own support of font formats. For example IE11 uses woff, while most others accept otf (opentype). Therefore, for fonts to look good in many browsers, you will need to connect multiple fonts at the same time.

There is an excellent service that allows you to create the required type of fonts using the other ones, for example, we can select MadelynFill font in the otf (opentype) format and generate a font for IE11 in the woff format basing on it.

We will use the font generator - http://www.font2web.com/

1. Go to the website http://www.font2web.com/
2. Press “Select file” (1), select the otf font
3. Click on the “Convert and “Download” picture (2), the download of the archive with all the fonts will start.

For now, we need fonts in woff and otf formats. We already have the otf format, we need the second one - woff.

In the archive, go to the fonts folder and move the woff format font to a convenient place, for example, next to the otf font.

In order to upload a font to the File Storage, you need to do the following steps:

1. Click on the avatar in the menu;
2. Follow the link “File Storage”;
3. Click on “Upload files”, choose your fonts and upload.

In order to create a CSS block, you need to:

1. Open the builder with a selection of blocks;
2. Select the item “Insert”;
3. Click on the CSS block.

The result is the created block.

We recommend that you always include styles in the website header (inside the very first block), so that the fonts themselves are loaded earlier.

1. Open the CSS block
2. Copy and paste the following code:

@font-face {
   font-family: 'Font name';
}

In our case, the name of the font will be MadelynFill, and as a result we get:

@font-face {
     font-family: 'MadelynFill';

}

 3. Save

We have completed the first part of connecting the font to the CSS block.

src: url('/fileservice/file/download/h/font-name.otf/a/identifier/sc/number')format('opentype'),
       url ('/fileservice/file/download/h/font-name.woff/a/identifier/sc/number')format('woff');

Where to get these highlighted values? Right at the time of loading the font into the File Storage, we received them.

• Go to the file storage
• Find our font, carefully look at the format, for example, find otf (1)
• Click on its ID (2)
• In the screenshot we see the required values (Font name - (3), identifier (4), number (5)

You need to carefully look at the numbers, because they may be different in another font.
Replace the values that you see. Do the same procedure with the second woff format.

src: url('/fileservice/file/download/h/font-name.otf/a/identifier/sc/number') format('opentype'),
url('/fileservice/file/download/h/font-name.woff/a/identifier/sc/number') format('woff');

Insert these paths into our general construction, in my case I get the following form:

@font-face {      
font-family: 'MadelynFill';           
src: url('/fileservice/file/download/h/162933746cbbc2fab983a8062752c5a5.otf/a/203244/sc/95') format('opentype'),          
url('/fileservice/file/download/h/94b48c42df1a98608ea63ab31d18a8e1.woff/a/203244/sc/193') format('woff'); 
} 

This code should be in your CSS block, put it there save.

Great, we've completed the hardest part!

The way of adding styles is described in the article “Styling an element with a custom class”.

You will need to declare the font in the selector - font-family: 'MadelynFill', sans-serif !Important;

The font will not be declared in the preview, you will need to publish the page and you will already see the result on it.

General selector for connecting a font to the entire page (all buttons, text, headings):

body .f-text,
body .f-header,
body .f-btn {
font-family: 'MadelynFill', sans-serif !important;
}