Tweak - How to change fonts for unsupported elements

Tweak allows you to change the font for many of the main text elements in your Ecwid shop, but there are several that are not supported directly by Tweak.

However, you can change the font of any element by using Custom CSS.

You need to find out what CSS selector(s) to use and then add the specific font setting for that selector to Shop Window > Custom CSS > Custom CSS After.

The easiest way to find the correct CSS selector to use is by using Firefox Firebug, or Chrome "Inspect Element" (Ecwid provide a bit of help with this here ).

As an example, we will change the font for the Breadcrumbs text to "Open Sans Condensed".

First, if you have not already done so, add the font information for your font to Shop Window > User Fonts, and remember, you have to also add the fonts code to your website so that the font is available on your live shop (Tweak can not do that bit for you as it only creates the CSS).

Now, using Firebug (or similar) we find the selector for the breadcrumbs text elements:

And use the Firebug panel to find the selector that is setting the font:

Note that Ecwid has added some extra stuff to these selectors to make them more specific, we need to remove this. 
In this case, (the normal situation) the extra stuff is 'html#ecwid_html body#ecwid_body' and if you are in Tweak, some selectors may have 
'html#ecwid_html body#ecwid_body.esd' at the start. We should remove these.

So change

html#ecwid_html body#ecwid_body .ecwid a, html#ecwid_html body#ecwid_body .ecwid a:active, html#ecwid_html body#ecwid_body .ecwid a:visited


.ecwid a, .ecwid a:active, .ecwid a:visited

Now, to make this selector use our font, we need to add the font style {font-family: 'Open Sans Condensed', sans-serif;}

So the complete CSS rule becomes:

.ecwid a, .ecwid a:active, .ecwid a:visited font-family: 'Open Sans Condensed', sans-serif; }

Put this into the "Custom CSS After" box in Tweak.

Note. be careful not to get strange special formatting codes in your CSS strings when you copy/paste/edit as these can really mess things up. It is best to use a text editor e.g. Notepad, TextMate, Sublime Text etc.) not a word processor.

You may also want to change the size of the font. To do this, simply add font-size: 16px; to the CSS rule. 16px is the size in pixels, so use whatever size you like here. So the complete rule becomes:

.ecwid a, .ecwid a:active, .ecwid a:visited font-family: 'Open Sans Condensed', sans-serif; font-size: 16px; }

The CSS rules can be broken into several lines to make them easier to read if you like e.g.

.ecwid a,
.ecwid a:active,
.ecwid a:visited {
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 16px;

See also, Using Custom Fonts

Feedback and Knowledge Base