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:
A window like this will open:
3. Choose one or more styles by clicking on " Select this style ":
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:
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:
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] .