1. Home
  2. Tutorials
  3. Pages
  4. Add a new typography to your website
 

Add a new typography to your website

You can choose a typography among the Font option proposed by emyspot on the Visual Editor. Nonetheless, you can always add an external font to the content Manager and make your website look even more original and personalized. To add a new font to your site, we recommend you having a previous knowledge of CSS coding.

Let's see how to add a new typography, from Google Web Fonts, to your website.

 

Search and choose fonts

There are many websites where you can find fonts to use on your own site, be awared most of them are paid or involve advertising and links.

For example:

Typography
Integration code

Add a Google Web Font to your website

In Google Web Font site you will find different free fonts to use in your site. Choose your favorite fonts and apply them to your website.
Keep in mind that each font added will make the page loading time longer, which is why adding too many fonts is not recommended.

To use a new typography, select the font by clicking on the icon  next to the font. Copy the font integration code, the CSS style and adapt it to your chosen elements.

Customize the font wih CSS

If you want, you can further customize the font by adding additional styles such as shades or text transformations. At the customisation page you will find different styles and how to apply them to each font.
The image on the right shows some examples of the available effects that can be added to the font.

Customize
Additional tags

Add the font to the manager

When accessing a page, the link tag allows browsers to load the online file needed to use the chosen font, which will be applied to the content through styles and layout (CSS).

Go to Settings > Global Settings > Editable zones and paste the code to the Additional Meta tags section. Don't forget to save the changes.

Apply the font to the website elements

We have loaded the CSS style in Google Web Fonts to apply them to the whole site, in the CSS section of Settings > Global Settings > Editable zones and in Settings > Design > Customize, in the respective section.

Keep in mind that depending on your website template and its settings, you will probably have to apply the style to other CSS elements besides the body, for example, to the titles or the links.

If you have activated the Advanced personalisation mode, you will be able to apply the font to the style sheet elements such as: page titles or menu links. It is also possible to edit the content of a page to apply the style only to a word or a paragraph.

Before adding a new font to your website, we recommend you to have a previous knowledge of how CSS works.

Meta tags