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.


Webnode umožňuje zmeniť fonty v sekcii vzhľad
Zmena písma vo Webnode je jednoduchá

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!

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).


Prvý krok je výber toho NAJ fontu

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

Tlačítko Select this style

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

Copy both codes and paste them to blank text block

Skopírujte si kódy fontu

Below printscreen shows the text block with both copied codes:

V textovom dokumente to vyzerá takto:

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


1. I have purchased STANDARD or PROFI Premium Plan

If you have purchased Standard or Profi Premium Plan from Webnode, you can paste code into the header on all pages

of the website with one click.

At the top of the Webnode editor, click “Settings” – “Website Settings” – “HTML Header / Footer” – “HTML Header“.

2. I have a project in Free version or I have purchased the Premium Plan Limited or Mini.

If you have a website or e-shop created in the Free version or you have purchased the Limited or Mini Premium Plan, then you must insert code in the header on each page separately.

1. Paste the code into the header of each page: In the top bar of the editor, click on “Pages” – “Select a page” – “SEO page settings” – “HTML Header” and paste your code.

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

Publikujte zmeny. Zmena sa prejaví v publikovanej verzii Vášho webu.

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

How to create a kennel website?

How to create a kennel website?

Kennel website - introduction Kennel website - benefits Kennel website - must-haves Kennel website - pricing Kennel website - Webnode templates TUTORIAL: How to create a kennel website? A few words at the end Kennel website - FAQKennel website - introductionIn...

Was this tutorial helpful? Share it, please.

Follow me