Font weight problems in X

[Ghiotto]

Hi, with the last update of X I can’t change the font weight manually in my css file. The browser take only the font weight set in theme options.

In particular I have set Assistant font with 300 of font weight for body in theme options and I’m trying to give a different weight only to a portion of a p element in my custom css (I’m using a child theme). This is impossible, also putting the !important declaration.

In the past I never had this kind of problem.

Why this? Let me know. Thank you very much.

Bye

[christian]

Hey Alessandro,

I don’t see you’ve set a 300 font weight in Theme Options so that weight is not loaded. I see you have 200 for the body and 700 for headings and they are working.

Since the font weight is not loaded, your CSS won’t work.

I tried 700 and it works so please change it to 700.

Thanks.

[Ghiotto]

Hi, thank you for response. I meant 200 and not 300. Yes, I have already tried and work only 600, 700 and 800 (even though they are all the same). But I don’t need these weights.

I have tried to load separately Assistant font in _header.php with all the weight I’m interested in, normally this has always worked for me, but now it hasn’t solve this problem.

The font weight in my css is still not working and it’s strange. On another site with a previous version of X, I can change font weight easily from my css. I can’t work if now this is not possible anymore.

Let me know if I have misunderstood your message.

Thank you very much

[christian]

Hey Alessandro,

Though that method has worked in the past, that is not a proper way to load a Google Font in a WordPress site. If you have added that in a parent theme, updates will wipe that out also. Right now, that isn’t loaded in the frontend of your site that is why as I’ve said, your CSS won’t work.

You can use a third party plugin to load Google Fonts like Google Fonts for WordPress. Or, enqueue a font in functions.php like in this guide.

To be sure, I tested both methods in your site and both works.

I would just like to add that loading different font weights would add to your page load time thus slowing down your site.

Hope that helps.

[Ghiotto]

Hi, thank your for your suggestion. I have not understand as font weights don’t work since in x-theme they are loaded. I can see all Assistant weights in theme options.

So, if I call a specific weight in my css it should be work. In the past if I used a font weight already present in x, it was working.

It’s not clear how it could not work.

And then, I have checked the link you have pasted for load Google font in the function.php and those of WpBeginner says the best way to load GG font is to use the direct link in head tag.

Performance Optimized Method of Adding Google Web Fonts
The best way of adding Google fonts is by using the Standard method which utilizes the link method instead of the import method. Simply take your font URL that you got from step 1. If you are adding multiple fonts, then you can combine the two fonts with a | character. Then place the code in your theme’s head section.

You will most likely have to edit your header.php file, and paste the following code above your main stylesheet. The example would look like this:

1 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
2  <link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
 
Basically the goal is to put the font request as early as possible. According to the Google Web Fonts blog, if there is a script tag before the @font-face declaration, then Internet Explorer won’t render anything on the page until the font file is done downloading.

[christian]

Hey Alessandro,

Selecting a Font Weight in the Theme Options will only load the selected font weight in the front-end. That is the optimized behavior. Users who are concerned with their page speed wants that. I’ve already explained that loading all the font-weights will slow down your site.

Now to the articles, yes, they say to link directly to the header. But, please see the difference between your method (added the font stylesheet using a template file) versus the one they recommend (enqueue the font in functions.php). That is the standard recommendation in WordPress development.

I hope you now understand.

[Ghiotto]

Ok, now it’s clear how x-theme loads every singular font weight.

Now I’ll proceed with function.php method.

Sorry fo the annoying question, but at least I have learned something useful.

Thanks you very much!

[rad]

You’re most welcome! And yes, you may try other methods. Thanks!