changing fonts to google font ABEL

[livellozero]

re.: changing theme fonts

I have been trying to unsuccesfully change the theme fonts from default to a Google Font named “ABEL”

(see it here https://fonts.google.com/specimen/Abel)

I went in theme options and changed H1 to H6 fonts to Abel without a problem. I also changed the body font to Abel (which is accepted) but the website frontend is now showing a font completely different from Abel in body (wile titles are ok).

check attached image

 

I have also noticed that some google fonts are allowed (like Lato, Roboto etc) but most of them are not, as if there is some type of instruction regarding this, somewhere

I have tried to change style.css as well but I have gotten the same result.

Any suggestion?

 

 

 

 

 

 

 

[livellozero]

Ops sorry I attached the wrong image (of the previous ticket). Please do not consider it. The correct one is the one attached here

[Radu]

Hi

Just add

COPY CODE

.post-info {
    font-family: abel !important;
}

Or only for homepage add

COPY CODE

.home .post-info {
    font-family: abel !important;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[livellozero]

Hello. Already tried this before but it is not working. That’s exactly the point. I am also purging cloudflare cache each time and w3 total cache but with zero results.

Currenty the Body font seems to be stuck on Lato font.

There is probably some other font setting instruction in some other file which is overriding style.css instructions or font change in theme options

If you want to tale a look yourself credentials are

WORDPRESS
livellozero.net/wp-admin
wp_8016302
g45euTgrt(BIVJbBw*l)Cr*J

FTP
185.128.41.242
livellozero@livellozero.net
eFeDj(W;’?

[livellozero]

I just checked now again and the body font in theme options had automatically switched back to lato font.

Just did the following
– switched body font back to Abel in theme font options
– verified that the css info you supplied is entered in style.css of KLEO CHILD

and in frontend the font has changed to some kind of times new roman

[Radu]

Your style.css file isn’t standard

Any style.css file from a child hteme should have those kind of headers

COPY CODE

/*
Theme Name:     Kleo Child
Theme URI:
Description:    Child theme for Kleo
Author:         SeventhQueen
Author URI:     http://seventhqueen.com
Template:       kleo
Tags:  one-column, two-columns, right-sidebar, fluid-layout, custom-menu, featured-images, post-formats, sticky-post, translation-ready
License: GNU General Public License
License URI: license.txt
*/

/*
* Please add your custom styles below
*/

.my-class {padding:0;}

So your style.css doesn’t have those

So just add those before your css rules

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[livellozero]

Hello. I did as you said. Now the style.css looks like this:
https://www.livellozero.net/wp-content/themes/kleo-child/style.css

There were a few improvements but the issue is not solved.

HP is showing post excerpts in Abel now, but the left side of the page (the blue one)
and top menu are still showing different font

Also if you open any post you will see a mix of other fonts

I cannot understand why all these settings cannot be managed in theme font options, as they should be

Please come back with a solution
Thanks
Marco 🙂

[livellozero]

I have the impression that the font is not loading for whatever reason in these theme. Or at least not loading in that specific size/boldness

for this reason alternatively fonts are shown

will it be possible to load that font from local server that instead from google repository?

other ideas?

[Radu]

Hi,

The reason for not working it’s the lack of the style.css heading how i’ve told you in previous reply.

In other words your file content should look like this

COPY CODE

/*
Theme Name:     Kleo Child
Theme URI:
Description:    Child theme for Kleo
Author:         SeventhQueen
Author URI:     http://seventhqueen.com
Template:       kleo
Tags:  one-column, two-columns, right-sidebar, fluid-layout, custom-menu, featured-images, post-formats, sticky-post, translation-ready
License: GNU General Public License
License URI: license.txt
*/

/*
* Please add your custom styles below
*/
.post-info {
    font-family: abel !important;
}

More or additional fonts standalone ( on your server font files) you can add using this method : https://archived.seventhqueen.com/forums/topic/how-can-register-japanese-font

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[livellozero]

Hello. I am not sure why heading is not shown at your end, but I can assure you that the code was entirely entered and saved exactly as you specified in

appearance/editor

for kleo child and style.css.

Currently Abel is shown in HP titles and excerpts but not shown in post body (lato font shown), not shown in top menu or sidebar (times new roman shown)

please check the attached screenshots: first is from style.css editor dashboard (in appearance/editor) and second is of the style.css content downloaded from ftp (public_html/wp-content/themes/kleo.child)

As you can see the instruction is as you suggested but still the correct font is not visualized in parts of the website

[Radu]

Hi,

i see but on my end it’s the same

try to update the file via FTP.

If not works as it should add it into : wp-admin -> theme options -> general settings -> quick CSS

Maybe the file not update from wp backend!

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[livellozero]

I have the impression you are heading me in the wrong direction. As I already told you in the previous message the style.css file DOES ACTUALLY INCLUDE the header + font info which you suggested in your instructions.
See the attached file, downloaded with FTP from location
public_html/wp-content/themes/kleo.child

Entering the Abel info in quick css had no effect whatsoever.

Another developer is saying that most probably Font-family hasn’t been declared for all the tags, this is why the font is changing only in some places and not in others

[livellozero]

sorry the correct ftp location where the file was taken from is
public_html/wp-content/themes/kleo-child

[Radu]

I don’t think so…

It seems to be a cache issue

If i access the style.css with paramenter : http://seventhqueen.com/public-files/radu/httpswww.livellozero.netwp-contentthemeskleo-childstyle.css123__2018-03-27_18-19-40.png it will show updated file, purge the cache man.

Maybe that’s not having effect cuz your site it’s cached

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[livellozero]

not sure what happened all of a sudden. seems to be working now.
thanks

[Author]

Posts