Changing fonts in your Ecwid store

Last updated

You might wish to change the size and color of the fonts in your Ecwid store. See below the CSS codes to change the fonts.

In this article:

Changing all fonts in your Ecwid store

If you would like to use a specific font throughout all your store pages, you can do it with the help of CSS.

Here is the code for changing color of all the fonts at once. Feel free to change "red" in the example to any color you like.


.ecwid div, .ecwid span, .ecwid a, .ecwid p {
color: red !important;
}

Here is the code for changing the font itself, please replace the NAME_OF_FONT with an actual font name:


.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: NAME_OF_FONT !important;
}

Example:


.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: verdana, arial, sans-serif !important;
}

Changing fonts on the catalog page

Here are the codes for changing price and title fonts in your catalog page. Feel free to change "blue" and "20px" to any color and font size you wish.


/*Product titles on catalog page*/

/*Change font color*/
.ec-size .ec-store .grid-product__title-inner {
color: blue;
}

/*Product price on catalog page*/

/*Change font color*/
.ec-size .ec-store .grid-product__price-amount {
color: blue;
}

/*Change font size*/
.ec-size .ec-store .grid-product__price { 
font-size: 20px !important; 
}

Changing fonts on the product page

Here are the codes for changing fonts in your product page. Feel free to change "blue" and "20px" to any color and font size you wish.


/*Product titles in the product page*/

div.ecwid-productBrowser-head {
color: blue;
}

/*Product price in the product page*/
div.ecwid-productBrowser-price {
color: blue;
}

div.ecwid-productBrowser-price { 
font-size: 20px !important; 
}


/*Product SKU in the product page*/
div.ecwid-productBrowser-sku {
color: blue;
}

/*Quantity label in the product page*/
div.ecwid-productBrowser-details-qtyLabel {
color: blue;
} 

Here is how the product page looks when all these codes are added:

You can change the fonts on your store

To change the buttons color refer to this instruction: Changing buttons in your Ecwid store
Back to top
Has the article answered your question?

Please send us your question. We will be happy to help by email.

Send us your question