Make fonts universal: Page 2

Make fonts universal

meditate

Great that worked!

Now we can manage all our fonts in one spot! (variables.less)

pavit

meditate Now we can manage all our fonts in one spot! (variables.less)

Only to complete info, have a look HERE

meditate

We have decided to make all H1, H2, and H3 tags serif and everything all smaller fonts sans-serif. What is the best way to do this?

We like the fonts chosen by the template -- so no changes there.

pavit

meditate What is the best way to do this?

You can use the custom.css to override this declaration contained in template.css

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: "Prata", Georgia, "Times New Roman", Times, serif;
  font-weight: 400;
  line-height: 1.6;
  color: #222222;
}

Regards

meditate

I added this code to custom.css and clicked "Less to CSS" then tried a new private window, but still the body text and menu is serif.

I am hoping to have only the h1 h2 and h3 tags serif, so I also tried this variation in custom.css

h1,h2,h3,.h1,.h2,.h3 {
font-family: "Prata", Georgia, "Times New Roman", Times, serif;
font-weight: 400;
line-height: 1.6;
color: #222222;
}

Thank you

pavit

meditate but still the body text and menu is serif.

For the menu you can add to custom.css

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > span {
font-family: add your font here!important;
}

For the body you can add in custom.css

body {
font-family: add your font here!important;
}

also change in custom.css as below

h1,h2,h3,.h1,.h2,.h3 {
font-family: "Prata", Georgia, "Times New Roman", Times, serif!important;
font-weight: 400;
line-height: 1.6;
color: #222222;
}

Hope it helps

meditate

We added this to custom.css but fonts are not changing. We have checked several computers/browsers, cleared cache, and clicked Less to CSS.

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > span {
font-family: Sans Serif !important;
}

body {
font-family: Sans Serif !important;
}

h1,h2,h3,.h1,.h2,.h3 {
font-family: "Prata", Georgia, "Times New Roman", Times, serif!important;
font-weight: 400;
line-height: 1.6;
color: #222222;
}

pavit

Hi meditate

I can see now your custom code correctly working for body and all <h> tags.

Please double check

meditate

Yes, but are you seeing san serif for the body text and top menu? I am still seeing serif.

pavit

meditate I am still seeing serif.

Maybe you will need to clean your browser cache i see sans serif

meditate

Yes, I can see the code says the menu font should be Sans Serif but the menu font is clearly still showing as a Serif font. That is the problem I am trying to resolve.

Same with the body font. It says in the code 'sans serif' but shows serif.

This page shows the difference: https://about.easil.com/support/serif-vs-sans-serif/

pavit

meditate

Sorry but i think that at this point you can simply change the font-name with the one you prefer and add it to the variables.less file and compile again it.

Remove the code added to the custom.css file and then change the font name with the one you prefer.

Take a look HERE

meditate

We tried your last instructions but, sorry, this is still not working. Can you please do this for us and tell us how you did this?

Menu and body text:
font-family: Open Sans;

Headings stay as is:
font-family: "Prata", Georgia, "Times New Roman", Times, serif;

saguaros

meditate
Hi,

I can't access your site now, are you working on it?

meditate

If the site shows itself as a white page, your IP may be blocked. Please email me your IPv4 from https://www.whatismyip.com/

saguaros

meditate
Could you add exception for IP from Italia, Vietnam, India, Poland?

pavit

Hi meditate

I can access your website, i think that would be better to start from scratch, and then changes only needed settings, so i restored original less fonts settings and recompiled again it to generate new css files, for now i keeped setings in custom.css file, so could you please look again at your website and tell us what you want to change and most important thing which font you want to use for that specific section?

I mean , this css

body {
font-family: Sans Serif !important;
}

Has no sense if we do not define before which is the default Sans Serif font, this is the reason why is there this confusion.

Hope it makes sense.

meditate

We just changed variable.less to Open Sans and the change worked this time.

// Typography
// -------------------------

@font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
@font-family-serif: "Prata",Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;

Should we have instead added this to the custom.css?

body {
font-family: Open Sans !important;
}

We have whitelisted IPs from Italia, Vietnam, India, and Poland. If you still see a white page, you may have done something to trip our server firewall. If so, please email us your IPv4.

Thank you

pavit

meditate We just changed variable.less to Open Sans and the change worked this time.

If that worked then you should not add any other code to custom.css file, you only need to isolate your settings so they will be not overrided from updates

Take a look HERE

« Previous Page