How do you change fonts and size of categories?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
  • (Edited)
Hi there i want to be able to change the font and the font size of my categories is this possible?
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like

Posted 7 years ago

  • 1
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
I have a font on my computer which i have downloaded and wish to use how do i do this?
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
I have been following this tutorial : http://forum.yola.com/yola/topics/usi... and i have got as far as step 6 on the Adding the Code for Your Custom Font section.

Step 7 says to Find and copy the code for the type of text you want to use with your custom font. For example, using Heading 2 for the custom font, you would find the code labeled "h2" like this example: h2 { font-size:180%;} (This code will vary depending on the style you have chosen for your site.

this is where i am stuck i dont know which particular section of code i need from on the right to be able to move it to the box on the left?

Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Justin

If you use a custom font, you should only use it for small pieces of text, such as headings, not for the whole text of your website. It is generally not recommendable to use custom fonts because you can only be sure that your font is displayed correctly if you use webfriendly fonts. You will find all webfriendly fonts in the font selector of the Text Widget or the Page Heading editor.

If you want to use a custom font, rather use it as an image to make sure it will be displayed the same way on every computer.

If you are not familiar with how to use CSS, I'd suggest that you first start learning using free online tutorials, e.g. W3 Schools.

When you edit the CSS of your website, you must only copy the code part that you want to change. So if you have e.g.
body {
color: #FFFFFF;
background-color: #000000;
margin: 10px;
}

and you only want to change the font colour ("color"), you will add this to your Site CSS overrides box:
body {
color: #FF0000;
}

Please understand that we cannot teach you in detail how to use CSS with Yola. But if you are curious and like to discover things, just experiment a little with the Site CSS override feature. Copy snippets to the Site CSS overrides box, change something, and preview it in the Preview tab (within the same dialgue box). It's fun. Hope this helps. Enjoy!
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Hiya thanks for the reply i have been experimenting with colours etc for my site and Gop has been helping me immensely with that ! i only want to change the fonts of the categories? (circled in red)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi justin,

Custom fonts are a little different to that referred to by Stefan. They have to be installed in your site so that they can be in effect downloaded by a user. This isn't a problem. You need a few files though to effect this and I can't remeber of the top of my head what they are. The good thing is that they don't have to be resident on your users computers. It over-rides the older idea of web-friendly fonts but the suggestion is not to have more than one or two per site as they tend to increase download time.

Prepared to do a bit of reading?

here's one of three(?) different types of fonts that can be installed. They are all a bit different depending on the font type (TTF vs whatever)
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Hiya Gop i have downloaded and installed the font i wish to use to the file manager etc as per the instructions of the tutorial above.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I am not confident of this but think that the h1 heading profile will be the one needed to change:

div.ys_heading h1{
color: #CCCCCC;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family:Arial, "Lucida Grande", Verdana, sans-serif;
font-weight:normal;
}

It's the font family that you need to address.
You can see that Arial is the preferred font and "lucida grand" is an alternative and if that fails then the follow on Verdana, sans serif or related is the fall back. It's good to have fall backs but not so important for customised fonts unless the user wants to set up their own CSS on their local computer and I don't know how many people would even consider that :)
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
i'll give it a go thankyou :-) do i just copy the h1 header in the box on the right to the box on the left?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. Substituting the new Font-family statement for the old.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
This is what is now in the site css overides box.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 20, 2012 */

@font-face {
font-family: 'electricalRegular';
src: url('resources /electrical-webfont.eot');
src: url('resources /electrical-webfont.eot?#iefix') format('embedded-opentype'),
url('resources /electrical-webfont.woff') format('woff'),
url('resources /electrical-webfont.ttf') format('truetype'),
url('resources /electrical-webfont.svg#electricalRegular') format('svg');
font-weight: normal;
font-style: normal;

}

div.ys_heading h1 { color: #CCCCCC;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family: "electrical",Arial, Verdana, sans-serif;
font-weight:normal;

after i did this as per the instructions on the tutorial i clicked ok nothing happened lol it didnt change
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. This may mean that I haven't identified the correct place to replace the statement.

have you placed the fonts in your File Manager?
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
I have i have these files in file manager

electrical-webfont.svg
electrical-webfont
electrical-webfont.eot
electrical-webfont.woff

Im assuming what i have done in the Site CSS overrides box is correct then? just using the wrong place to replace the statement?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
This statement:
font-family: "electrical",Arial, Verdana, sans-serif;

should be font-family: "electrical-webfont",Arial, Verdana, sans-serif;
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
i will try that now :-)
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Changed that line of code again nothing happened. lol
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Justin

It's very nice that Gop spends so much time on helping you, we really appreciate it!

With regard to your question on changing the font colour of the navigation links, I can have a look at your Site CSS and find out for you if you post your URL or your login e-mail (not your password) here. When I searched for your account in our system using the e-mail you use for Get Satisfaction, I was only able to find a deleted account, so I guess your website is in a different Yola account?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
So try:
div.ys_heading h1 { color: #xxxxxx;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family: "electrical-webfont",Arial, Verdana, sans-serif;
font-weight:normal;


You can also change the colour value to what you prefer.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Done but again nothing changed :-(
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
I haven't asked to change the font colour of my navigation links???... Gop has already explained to me in great detail how to do that and i have accomplished my objective regarding that lol
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Have I??? Oops sorry. Something I had forgotten.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
yes when you said about using firebug to change the css colour for my descriptions of my online store i simply applied that same knowledge to the colour of the navigation links lol
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If that doesn't work try "electricalRegular" as the substitute font-family name
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
tried that the css over ride box reads :

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 20, 2012 */

@font-face {
font-family: 'electricalRegular';
src: url('resources /electrical-webfont.eot');
src: url('resources /electrical-webfont.eot?#iefix') format('embedded-opentype'),
url('resources /electrical-webfont.woff') format('woff'),
url('resources /electrical-webfont.ttf') format('truetype'),
url('resources /electrical-webfont.svg#electricalRegular') format('svg');
font-weight: normal;
font-style: normal;

}

div.ys_heading h1 { color: #40E0D0;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family: "electricalRegular",Arial, Verdana, sans-serif;
font-weight:normal;

But again nothing happened.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
http://www.mjs-trade-outlet.co.uk/ you will see i have changed what i needed too :-)
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Justin, judging from your screenshot above, the red highlighted area that you called "categories" seems to be your navigation menu. But if Gop has sorted you out already, never mind. Enjoy Yola!
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Sorry im confusing myself ! lol no i haven't changed the categories colour. how do i change that?
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
id like them to be in this colour #40E0D0 but when highlighted in this colour #FFFF00 :-)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Justin there's no closed curly bracket at the end of your

div.ys_heading h1

this can cause problems.

Currently it's
div.ys_heading h1 { color: #40E0D0;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family: "electricalRegular",Arial, Verdana, sans-serif;
font-weight:normal;


needs to be;
div.ys_heading h1 { color: #40E0D0;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family: "electricalRegular",Arial, Verdana, sans-serif;
font-weight:normal;
}


and you have closed your style</style> after the end of your div.ys_heading h1 rather than at the end of your font face code so I don't know what effect that may have but I would do that as well.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Ok so i changed the code to allow for the bracket, as for the do i add that to the end of the existing code i the CSS overide box?
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
sorry the command didnt post "as for the < / s t y l e >"
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
After allowing for the bracket nothing has of yet changed.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
code now reads :

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 20, 2012 */

@font-face {
font-family: 'electricalRegular';
src: url('resources /electrical-webfont.eot');
src: url('resources /electrical-webfont.eot?#iefix') format('embedded-opentype'),
url('resources /electrical-webfont.woff') format('woff'),
url('resources /electrical-webfont.ttf') format('truetype'),
url('resources /electrical-webfont.svg#electricalRegular') format('svg');
font-weight: normal;
font-style: normal;

}

div.ys_heading h1 { color: #40E0D0;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family: "electricalRegular",Arial, Verdana, sans-serif;
font-weight:normal;
}
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The additional <style>...</style> I've added is almost certainly over-kill but it's not going to hurt and it helps you to identify additional code added.

The } curly bracket I have included in the snippet so you can either transcribe the } or cut and replace your existing two pieces of code with this. Up to you.

You have done remarkably well on the CSS. It's pedantic as you have discovered and always causes some concern as you pick it up. I think that your rate of learning is well above average and certainly mine, so i expect that you will go ahead in leaps and bounds. (i'm still waiting for the first leap :( ). Stefan has given you a great resource in learning CSS with w3schools and it is good. The other I like also is the about.com lessons but I find the style of documentation quite convoluted although very complete with lots of good advice on the way

<style id='yola-user-css-overrides' type="text/css">

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 20, 2012 */

@font-face {
font-family: 'electricalRegular';
src: url('resources /electrical-webfont.eot');
src: url('resources /electrical-webfont.eot?#iefix') format('embedded-opentype'),
url('resources /electrical-webfont.woff') format('woff'),
url('resources /electrical-webfont.ttf') format('truetype'),
url('resources /electrical-webfont.svg#electricalRegular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>

<style>
div.ys_heading h1 { color: #40E0D0;
font-size: 280%;
margin:5px 0 0 5px;
padding:0;
font-family: "electrical-webfont",Arial, Verdana, sans-serif;
font-weight:normal;
}
</style>
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Forgot to mention: Watch your font-size too. You should keep it at the same as the original because the DIV may not hold a greater size and then it won't display.
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
Thankyou for your praise ! i appreciate it immensely !. Don't put yourself down i wouldn't have come this far if it wasn't for you ! I have just copied and pasted your code and deleted mine so the CSS overide box reads exactly as you have put above.

However the font still did not change.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Bugger!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
On another mod you may like to remove the word Store from your breadcrumb trail. Many think that it's redundant and I think I agree,

div.ecwid-productBrowser-categoryPath-storeLink, span.ecwid-productBrowser-categoryPath-separator-first {
display:none !important;
}
Photo of justin fantham

justin fantham

  • 301 Posts
  • 1 Reply Like
i have now removed the word store ! thankyou :-)