Make fonts universal

meditate

How do I get the serif fonts on the 'home-magazine' page to be global for the entire site?

pavit

You can edit this file /templates/ja_aiga/less/variables.less and in typography section change your default font

@font-family-sans-serif:  "IBM Plex 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;

After you saved the file compile again less to css to reflect your changes in css files.

Regards

meditate

Hi Pavit,

I removed all san-serif fonts:
https://www.dropbox.com/s/y63in58zxyah7em/Screenshot%202019-04-16%2009.00.46.jpg?dl=0

I clicked the "Less to CSS" and watched the orange bar go across, then did a hard cache clear on Chrome plus checked Joomla to clear cache (nothing to clear) but still see sans-serif fonts on the blogs. Is the typography for the blogs in a different spot?

https://www.dropbox.com/s/qmtg8zpn7hnmv65/Screenshot%202019-04-16%2009.01.31.jpg?dl=0

pavit

Hi meditate

It seems some font is overriding default font with !important

could you please update your super user account on your first post and also disable any optimization from global configuration?

meditate

I tweaked my login settings but they were already correct. (There does not seem to be enough fields to put in all the fields necessary.)

I looked in Global Config and could not find any optimization settings to disable. Here are the system settings with "System Cache" disabled.
https://www.dropbox.com/s/0s4gkm5xftrhs30/Screenshot%202019-04-16%2009.22.06.jpg?dl=0

pavit

meditate

I see you changed the font-family base in variables.less but keeped the sans-serif as main


@font-family-base:        @font-family-sans-serif;

If you want to have serif font then you should set the base as serif and then compile less to css again

@font-family-sans-serif:  "IBM Plex 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;

meditate

Sorry, my mistake but now I just changed to only one line in variables.css to
@font-family-serif: "Prata",Georgia, "Times New Roman", Times, serif;

Then we clicked "Less to CSS" and did a hard refresh on Chrome but still see san-serif fonts.

pavit

meditate

I corrected it you deleted the @font-family-base: declaration

It is now

@font-family-serif:       "Prata",Georgia, "Times New Roman", Times, serif;
@font-family-base:        @font-family-serif;

Please check

meditate

Text fonts are all now Serif but H2 tag is still san-serif.

https://www.dropbox.com/s/7upv6rb9wxl7pqu/Screenshot%202019-04-16%2010.12.18.jpg?dl=0

pavit

meditate

They are overrided by publisher bootstrap

modify this file

/components/com_publisher/css/publisher-bootstrap.css at line 48 removing the !important tag

.contentheading,.componentheading,h1,h2,h3,h4,h5 {
	font-family:Arial, Helvetica, sans-serif!important;
}

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