How to set up your own font in Webnode using Google Fonts library?

Videotutorial

Would you like to change the font in Webnode to one of the Google Fonts?

Few words at the beginning

Webnode enables you to change the font on your website under section: “Settings” – “Design” – “Fonts”.

Of course, Webnode editor offers the most used and popular fonts and they ARE really nice.

But what to do if u cannot choose from fonts what Webnode is offering?

Follow this tutorial!

One of the questions from the visitors of my web Wpromotions was about the possibility to change the font on the Webnode website using Google fonts.

My answer was: Yes.

It is possible to change the Webnode website font to one of the Google fonts.

I am going to explain and show you how to change the font in the Webnode on your website in this tutorial.

The font you choose as the “one” will display not only for the basic text but for headings and subtitles as well.

You will subside the Webnode font by one of the Google fonts.

Google Fonts is a library of more than 1000+ fonts, so you will find the right now for your website with no problems.

Let`s do it!

1. To generate the HTML code of the chosen font

2. To subscribe to newsletter and to custom the predefined code

3. To insert the code to your website

step – generate the HTML code of the chosen font

Easy tutorial: Predefined font in Webnode changed to one of your likings

1. Visit the official website of   

and choose one of the available font (Click on it).

2. If u choose the best font for you, just click on Select this style

3. Under the section “Use on the web”, select “@import”

Copy both codes and paste them to blank text block

Below printscreen shows the text block with both copied codes:

step – Subscribe to newsletter and get predefined code

Two codes you inquired must be merged to one code only.

For that, I prepared predefined code.

4. Subscribe please to my newsletter William Promotions News and gain the predefined code to change your font on your Webnode website.

Copy the predefined code and paste it to the text block, under the two official codes from Google Fonts.

See below print screen for more details.

Change the predefined code by merging it with Google Fonts codes

based on the below video tutorial Refer to minute 2:55

step – insert code to your Webnode website

After successfully creating your code (by merging the Google Fonts codes with the predefined one),

it is time to insert your code to the HTML header of the Webnode website.

5. Choose from below types how to insert/add a code to your Webnode

6. Publish your changes and see your brand new FONT in published version!

Few words at the end

Thank you all for subscribing to my newsletter. I really appreciate your support.

Great – you have just set up your preferred font on the Webnode website. It wasn`t so hard, was it?

Please leave a comment.

Do not forget to subscribe to my YouTube channel William Promotions not to miss any of my new tutorials.

I wish you all the best luck with your online business.

More awesome tutorials