Lato Light Italic

Support
#1

I’m using X with a child theme of the Renew stack. I’m using the Lato font family for the body text, and <blockquote> elements are given a class of "w-100", meaning that they appear in Lato Light.

Unfortunately, I can’t seem to get italic text (text tagged as <em>) to appear in Lato Light Italic, meaning that the italic text in blockquotes looks bolder than the surrounding text. I’ve tried adding the "w-100" class to the <em> element, and I’ve tried adding custom CSS, but I can’t get it to work. How can I get my italic text to have the same weight as the surrounding Light text?

#2

Hi There,

Please provide your URL so we can provide you a tailored solution.

Thanks

#3

URL provided in secure note.

Thanks for looking into this!

#4

Hi there,

Unfortunately, I could not see any italic text on that URL to be able to give you proper suggestion. But in general, kindly go to X > Launch > Templates > Fonts and add the Ultra Light font face to the Lato font there on the body copy.

Then go to X > Launch > Options > Typography and disable then enable the Font Manager option, and set the body text to body copy.

That should fix the issue. I wonder if you see the problem in Chrome or Safari?

Thank you.

#5

Thanks Christopher. There’s no italic text because it’s a live site and it looks awful! I’ve added some now so you can see it. Lato Ultra Light is definitely added in Templates > Fonts and I’ve reset the Font Manager and set the body text as you suggested. The problem is still visible on both Chrome and Safari.

Please let me know if there is any other information you need.

Best wishes

Rhiannon

#6

Hi Rhiannon,

Upon checking your website in Chrome I see Lato is working but no italics on my end as well.

Please clean your browser cache and test it again.

if the issue persists, please provide a screenshot.

Thanks!

#7

Here is a screenshot showing how it looks on my end. Screenshot taken in Safari but it looks the same on Chrome.

#8

Hello There,

Thanks for sending the screenshot. To resolve this, please go to Appearance > Editor and insert this line in your child theme’s style.css

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

This should load the 100 or thin font size of Lato into the page.

Please let us know how it goes.

#9

Thanks. Sorry, my mistake, I didn’t actually want 100 Thin – that was a red herring.

I want 300 Light Italic on my italic text. At the moment the roman text is appearing in 300 Light but the italic text is appearing in 400 Italic. I’ve tried adding the import line you suggested, as that should also add 300 Light Italic, but the italic text is not changed on either Chrome or Safari. The Google Fonts page linked to in my page’s source code, http://fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C700%2C700italic%2C300|PT+Sans+Caption%3A400|PT+Sans%3A400&subset=latin%2Clatin-ext&ver=5.1.0, is unchanged and does not define Light Italic for Lato. I don’t have any caching plugins in use on the site, so I’m not sure why it’s not updating when I change the child theme stylesheet. Any ideas?

#10

Hi again,

You should add the following code in your Child Theme’s functions.php file:

add_action('wp_head','custom_font');
function custom_font() { 
?>
	<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet" type="text/css">
<?php 
}

Let us know how this goes!

#11

Hi Nabeel. Thanks for that suggestion. Unfortunately it doesn’t seem to have made any difference. The page source code is unchanged. Is there anything else I can try?

#12

Hi There,

Actually your page is loading the Lato font, would you mind to clarify what page and which text content should be in Lato?

Thanks,

#13

Hi Friech

Yes, my page is loading Lato. Unfortunately it’s not loading Lato Light Italic. See the screenshot I posted a week ago: the roman text is Lato Light but the italic text is Lato Italic, not Lato Light Italic. That makes the italic text look bolder than the surrounding text.

#14

Hi again,

I tested the following code in my local installation:

add_action('wp_head','custom_font');
function custom_font() { 
?>
	<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet" type="text/css">
<?php 
}

It’s working fine on my end. It was added to my theme with all weights and italic styles. Have you added the the above code in your Child Theme’s functions.php file? Make sure it’s added in the Child Theme’s functions.php file…

Let us know how this goes!

#15

Hi Nabeel

Yes, I confirm that this code is in my child theme functions.php file. It’s still not making a difference.

Here are the two calls to Google Fonts in the page source code:

In <head>:

<link rel="stylesheet" id="x-google-fonts-css" href="//fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C700%2C700italic%2C300%7CPT+Sans+Caption%3A400%7CPT+Sans%3A400&amp;subset=latin%2Clatin-ext&amp;ver=5.1.0" type="text/css" media="all">

In <body>, just after <div id=x-root>:

<link rel="stylesheet" id="cs-google-fonts-css" href="//fonts.googleapis.com/css?family=Lato%3A400%2C400i&amp;ver=2.1.3#038;subset=latin,latin-ext" type="text/css" media="all">

Please let me know if you need any more information.

#16

Hi again,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

All the best!