Change font in store

  • 1
  • Question
  • Updated 8 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 8 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
No You can't do it that way.

You have to do this in Ecwid itself.

You need to go to the System Settings→Design→CSS Themes→New Theme (Give it a name)

This will copy your default theme into a new CSS library. It is here where you can alter the CSS for colour etc.

I would suggest that you download Firebug and use Firefox as your browser. There are tutorials for learning it on YouTube. If you prefer I can do this with you but I would need access to your login. If you want this then you can send me an email at gop@designscent.com.

What we need to do is to identify each segment of font that you wish to change and make the change into the CSS: http://kb.ecwid.com/w/page/46376921/H....
Photo of Sarongkopen.nl

Sarongkopen.nl

  • 51 Posts
  • 1 Reply Like
Thanks for the reply!
With firebug I discoverd that the title's font is Dancing Script and in my store it's Arial.
my guess is that in this piece of code:
----------------------
body {
background-color: #FFFFFF;
color: #666666;
font-family: Arial,Helvetica,Helvetica,sans-serif;
font-size: 12px;
text-align: center;
}
------------------------------------
I just need to replace "Arial,Helvetica,Helvetica,sans-serif" with "Dancing Script"? Is that correct?
If so, what exactly do I need to put in the textbox at 'Custom css theme' where it now says "/* Standard scheme has no changes to the Base CSS, so it's empty */"?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Sarongtoko,

May I ask if you have replaced the default font of your Yola built site with Dancing Font?

If so this complicates the issue. The store will set it's own default as the Yola default and not the custom font.

If you can tell me this I may then offer some direction on changing your store font..

I'll stay on this for as long as you need to get this up and running.

If you can publish your site at this stage and let me know the address then I too can use Firebug to track what is happening on your site and can respond to your questions with solutions at yours and my convenience.
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.