Change font in store

  • 1
  • Question
  • Updated 6 years ago
  • Answered
How do I change the font in my store? I want it to match the rest of my website.
Photo of Sarongkopen.nl

Sarongkopen.nl

  • 51 Posts
  • 1 Reply Like

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi sarongtoko,

I think that the font will be the same style as your site but the colours will be different. Is that what you are meaning?

If so it is easy to change the font colours etc.

If this isn't working because of custom fonts etc then you can use this code:

You need to go through the process of creating an alternate store style. if you need help let me know.

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

For example:

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

Sarongkopen.nl

  • 51 Posts
  • 1 Reply Like
I really need to change the font, and the color as well but hadn't thought of that yet. Where do I do this? can't I change it in the pagebuilder under Style > Edit custom CSS?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Just to add an update here. This code added to your custom CSS in your store will change the default font.

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

Please note that if your chosen font is a custom font ( ie not a common font available to all PC users) then this cannot be used for your Online Store because the store doesn't allow the use of HTML to be added into the custom coding. This would probably exclude the use of Dancing Script.
Photo of Sarongkopen.nl

Sarongkopen.nl

  • 51 Posts
  • 1 Reply Like
Thanks for your help! Much appreciated.
I chose a font from the site builder menu, the 2nd from the top (looks like handwriting). Dancing Font was what I found with firebug.
my site is published at http://sarongtoko.yolasite.com
but I hope I can get it to work using your piece of code, I just need to find out the name of the font.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi sarongtoko,

I don't think that this can be done with the Yola Online Store.

The Store itself is a separate entity completely. Setups on the site don't affect the appearance of the store. If you like it's a separate widget.

With the Yola Online Store you can't get into the Ecwid widget to make those changes. I have tried a few things but no go. You can't install custom fonts within the Store widget as such so it can't use them.

I have noticed that you have changed your font but it is defaulting to a serif font on your store. This is because it can't locate the font within Ecwid and just drops down to the next likely font.
Photo of Sarongkopen.nl

Sarongkopen.nl

  • 51 Posts
  • 1 Reply Like
So the only thing I can do is change the font on my site to make it match the one in the store? Or is there a style I can choose that the store also recognizes?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Your strategy mentioned would be good. I have a seen a list of Ecwid safe fonts but I cannot now find it. I would go with the common safe fonts and just try them.

The store can only use web-safe fonts. ie: Fonts that occur on almost every computer as a resident font. A 2012 survey came up with the top 12 fonts commonly resident on the vast majority of computers: Impact, Palatino Linotype, Tahoma, Century Gothic, Lucida Sans Unicode, Arial Black, Times New Roman, Arial Narrow, Verdana, Copperplate / Copperplate Gothic Light, Lucida Console, Gill Sans / Gill Sans MT, Trebuchet MS, Courier New, Arial, Georgia

The Store itself specifically mentions some of these and allows for a degradation into other like fonts if they are not resident, which is good practice.

I have found some more stuff on Ecwid but as yet it hasn't been released although they do suggest that they will in an upcoming release.
http://www.ecwid.com/forums/showthrea...
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
Hi sarongtoko,

Just following on from Gop's advice above, to get to system settings:

1. Log into My Yola.
2. Click "Online Store".
3. Click "Advanced Options" (located at the bottom-right of your product list).
4. "System Settings" is located in the top-right of the window.