font-weight goes normal for Italic Text using Roboto Font Family

Question

I am facing a weird problem with Italic font in HTML newsletters when I open them in Gmail.

I am using font-weight: 500; for the whole Headline, but when I try to Italicize a part of Headline then the font-weight goes normal for the text which is Italicized.

I am sharing the screenshot below to better understand the issue:

In the above screenshot taken from Gmail, font-weight:500 is set to whole headline. But when I try to Italicize the "October" then the font goes normal for that particular section.

here is the HTML:

<table role="presentation" class="wrap" width="570" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
     <td align="left" class="hl-2">3. The month <i>October</i> is the best time to visit Jaipur.</td>
  </tr>
</table>

here is the Css:

.hl-2 {
        font-size: 18px; 
        line-height: 22px;
        color: #34444c;
        font-weight: 500;
}

Any idea how to handle this situation? Your help would be really appreciated.

Thanks!

Answer 1

TL;DR: Use font-weight: bold instead of font-weight: 500.

The issue here is whether your font (Roboto) loaded properly and completely. Different fonts render boldness and italics differently. When it comes to email, remote resources aren't guaranteed to load. Your Gmail session isn't rendering this text in a font that supports medium weight italics; it's either a lighter version of Roboto (without weights) or else a different font altogether.

The MDN docs for font-weight note that normal is 400 and bold is 700, leaving 500 somewhere in the middle. There's a little more detail in the variable fonts section:

Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

If no custom weights are given for a font, your software will create them itself, rendering its own italics and bold (weight: 600_{^{, at least for me on Firefox on Debian}}) but no degrees of boldness, so weights of 600 or higher are bold while lower weights are normal.

In this example, I've pulled font-family and font-weight out into their own classes so you can see the differences between Roboto loaded without and then with weights. I've also adjusted the white space and wrapping to minimize scrollbars.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
/* @import url("https://fonts.googleapis.com/css?family=Roboto"); */
/* I can’t load the same font twice with different configurations,
   but I can manually load it named differently as “Roboto-Regular”: */
@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.hl-2 {
        font-size: 18px; 
        line-height: 22px;
        color: #34444c;
}
.roboto-reg td { font-family: Roboto-Regular; }
.roboto td { font-family: Roboto; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-900 { font-weight: 900; }

Roboto-Regular (no weights):
<table role="presentation" class="wrap roboto-reg" width="570" border="0" 
       align="center" cellpadding="0" cellspacing="0">
  <tr><td align="left" class="hl-2">
    3. The month <i>October</i> is the best time to visit (no weight)</td></tr>
  <tr><td align="left" class="hl-2 weight-500">
    3. The month <i>October</i> is the best time to visit (500)</td></tr>
  <tr><td align="left" class="hl-2 weight-600">
    3. The month <i>October</i> is the best time to visit (600)</td></tr>
</table>
Roboto (with weights):
<table role="presentation" class="wrap roboto" width="570" border="0" 
       align="center" cellpadding="0" cellspacing="0">
  <tr><td align="left" class="hl-2">
    3. The month <i>October</i> is the best time to visit (no weight)</td></tr>
  <tr><td align="left" class="hl-2 weight-500">
    3. The month <i>October</i> is the best time to visit (500)</td></tr>
  <tr><td align="left" class="hl-2 weight-600">
    3. The month <i>October</i> is the best time to visit (600)</td></tr>
</table>

I was not able to reproduce your issue of losing boldness just for the italicized text (perhaps a browser or OS difference), but I still believe I've diagnosed and reproduced your issue correctly.

Since this is email, you can't be assured that remote resources will be loaded and you don't want to attach a font to the email. Expect most of your non-Gmail readers will see this in other fonts.

For broader support, I suggest using font-weight: bold. If you want something lighter, consider something like text-shadow: -0.02ex 0 currentColor, 0.02ex 0 currentColor; instead of a font weight (see this answer).

Answer 2

Ensure that you have api reference link for the italic version of the font "roboto 500" Get it from here

Answer 3

Maybe the <i> tag is being overridden somewhere in the CSS? Try using a <span> tag using a class attribute like this:

3. The month <span class="ital">October</span> is the best time to visit Jaipur.

and then have the CSS like this:

.ital{
   font-weight: 500;
}

It's been a while since I used HTML/CSS, so this is probably wrong :P

Answer 4

The text between <i> tag is overwritten by user agent stylesheet, the set of default styles in the browser. It can be easily solved by define style for the tag. For this problem this will be i {font-weight: 500;}

.hl-2 {
        font-size: 18px; 
        line-height: 22px;
        color: #34444c;
        font-weight: 500;
}

i {font-weight: 500;}

<table role="presentation" class="wrap" width="570" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td align="left" class="hl-2">3. The month <i>October</i> is the best time to visit Jaipur.</td>
    </tr>
</table>