Change my shop font

In this article we will show you how you can customize the fonts of your store using Google Fonts.

Lara Macarena Sastre avatar
Written by Lara Macarena Sastre
Updated over a week ago

If you do not have your fonts hosted on your own server, we recommend a Google font bank, where you can choose from hundreds of options. Access Google Fonts from here , it's free!


From Google Fonts


1. Enter Google Fonts and choose the font you want. You can use the search engine or scroll with the mouse or keyboard to view the available sources:


2. Once you have chosen the source, you must click on it:

Screen Shot 2021-08-04 at 13.15.53

A window like this will open:


3. Choose one or more styles by clicking on " Select this style ":

Screen Shot 2021-08-04 at 13.12.26

Each font will have various styles, such as bold , italic , etc.


4. When you're done choosing your styles, click the button in the top right to see your selection of font families:

Screen Shot 2021-08-04 at 13.18.23

The following menu will be displayed on the right:

5. In the Use on the web section , click the @import option to get the source code:

6. Select and copy the code obtained to embed it in the store:

from the store


1. Go to Control Panel > Settings > Advanced

2. Go to Custom before </body> code and paste the code obtained from Google Fonts, in step 6:

Click Save .

The font is already installed in the store!

⚠️Now you must indicate which texts you want to add said source to. You can change the font of the entire store or of some specific texts.

3. Check if you have the Custom CSS or Custom CSS block enabled :

If you don't have it, don't worry, you can add the code in the Custom before </body> code block, embedding it in the <style>..... </style> tags

If you want to change the font of the whole store, you can use the following code:

body{
font-family: 'Open Sans', sans-serif; /*Aquí deberás colocar la fuente que tu elegiste*/
}


You will have the following way:

O well:

As you may have noticed, the font-family that we added in the code block matches the one we chose as an example in this article. You must place the one you have selected in Google Fonts.

To be sure, you can view the font-family line of code from here:

Screen Shot 2021-08-04 at 14.01.08

Ready! You can now see the changes in your store:

We hope this tutorial has been easy for you. If you have questions, write to us at [email protected] .

Did this answer your question?