0

I have the following structure for my CSS:

index.html
css
--fonts
----roboto
------roboto-italic-demo.html
------roboto-italic-webfont.woff
------roboto-italic-webfont.woff2
------stylesheet.css
--main.css

stylesheet.css contains the following CSS

@font-face {
    font-family: 'robotoitalic';
    src: url('roboto-italic-webfont.woff2') format('woff2'),
         url('roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

roboto-italic-demo.html is a demo page with the entire alphabet characters displayed using font-family: 'robotoitalic';. Here the g appears like it should.

enter image description here

main.css contains the following css

@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/roboto/roboto-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'robototest2';
    src: url('fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
         url('fonts/roboto/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

index.html includes the main.css stylesheet. Using font-family: 'roboto'; font-style: italic; cuts off the right side of the g character. using font-family: 'robototest2'; cuts the right side of the g character as well.

enter image description here

Here's what I tried in order to fix the issue:

  • Redownload roboto-italic-webfont.woff && roboto-italic-webfont.woff2

  • Put "Comic Sans MS" as a fall back to make sure I was actually using roboto or robototest2

  • Added letter-spacing

  • Placed the g character within a span with padding

edit:

This question was marked as duplicate. The question linked referred to text protruding from its container, where as this one is about a character being cut-off no matter its position within any tag. For example, this html

<p><em>This g is being cut off on its right side</em></p>

results in

enter image description here

Der
  • 727
  • 7
  • 20
  • 1
    http://stackoverflow.com/questions/26296434/html-italic-letters-protrude-from-their-container-and-may-be-cut-by-the-next-co – Vcasso Dec 23 '16 at 16:56

1 Answers1

0

I had the same issue, also with Roboto, italic at regular weight. The version of Roboto I was using was self hosted and downloaded from Font Squirrel.

I tried the Google hosted version of Roboto, and it rendered the "g" correctly, so I figured there must be something off with my version of the font. I found this answer on a separate Stack Overflow issue: https://stackoverflow.com/a/15976457/1786681 which recommended uploading your own ttf of the font to Font Squirrel's webkit generator, selecting the "Expert" option, and leaving all the defaults except changing the "Em Square Value" to "2162". I downloaded the .ttf file of Roboto from Google and went through these steps and voila! My italic "g"s are now rendering beautifully!

Brenda
  • 835
  • 8
  • 11