In this tutorial, we will use a font file, OpenSans-Regular.ttf, downloaded from Google Web Fonts as an example. You can use your own font but be sure to check out the copyright of it to make sure you are allowed to distribute it through web. This is required because when the page is opened in your visitors' browsers, the font file will be downloaded to their computers.
Open a website for adding font faces and create a new folder "fonts" by clicking on this button . Drag the font file "OpenSans-Regular.ttf" to the folder "fonts". You can give it another name or just place the file in the root folder.
Open the CSS Style Editor by selecting "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Click on the button "Font Face" on the right.
The Font Face Dialog will be opened.
Click on the button "Add" on the right.
We will generate another formats woff2, woff and eot from this font. Both formats woff2 and woff are smaller in size than the ttf. The eot format is for supporting older browsers. Browsers will load the one that they support. Click on the button "Font Converter". If you already have the other formats, skip this and just add them to the "fonts" folder and select them from the drop down menu of the field "URL".
Select the font "OpenSans-Regular.ttf" from the folder "fonts". The output folder will automatically be set to use the same folder to store the other converted fonts. Select all the formats.
Press the OK button to generate the font files.
After the generation, all four formats will be added automatically. If you have your own fonts, just select them from the drop down menu of the field "URL". Maximum of 4 formats can be selected. The font attributes will be filled in automatically from the information obtained in the TTF font file. Check if they are correct especially the "Generic type". Some font files do not provide it. When the font file has not been loaded yet, browsers will use a sans-serif font supplied by the system to display the text. Click on the OK button to add this font.
You can add another font by clicking on the "Add" button again. Then click on the OK button to save the settings.
After adding a font, a corresponding font family "Open Sans, sans-serif" will be added automatically.
To use it, create a new style, say "open-sans". Select the text option "Font family" and select "Open Sans, sans-serif" from the drop down menu. Be sure to match the font weight and the font style with the font attributes when this font was added. They are both "normal" for this font. As they are the default, you can skip setting them. So to use this font on your text, you will need something like the following settings:
Click on the OK button of the CSS Style Editor to save the settings and exit the dialog.
. Drag the font file "OpenSans-Regular.ttf" to the folder "fonts". You can give it another name or just place the file in the root folder.
on the toolbar.
