Font Being cut off by IE/ME

Question

I'm having an issue with IE and Microsoft Edge cutting off the last letter in my h1 tag if it is a tall letter (eg. l, d).

Here is how it is supposed to look:

vs how IE and ME are rendering it:

@font-face {
    font-family: Edwardian;
    src: url('font/EdwardianScriptITC.eot');
    src:url("file:///projects/font/EdwardianScriptITC.eot");
      src: url('font/EdwardianScriptITC.eot?#iefix') format('embedded-opentype'),
        url('font/EdwardianScriptITC.svg') format('svg'),
        url('font/EdwardianScriptITC.woff') format('woff'),
        url('font/EdwardianScriptITC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
}
header h1 {
    font-weight: 900;
    font-size: 5em;
    color: #000;
    margin-left: 15px;
    margin-bottom: -35px;
    overflow: visible;
}
.content, .page-content {
    margin: auto;
}

<div class="page-container">
  <header class="content">
    <h1 class="cursive">Industrial</h1>
  </header>
</div>

Can you post your HTML as well please, including wrapping elements of the `h1`. It appears a wrapping container might have `overflow: hidden` set — zgood, Mar 27 '18 at 15:56
Related - https://stackoverflow.com/questions/38723407/how-to-prevent-a-text-from-overflowing-and-from-being-clipped — Paulie_D, Mar 27 '18 at 16:06
..and - https://stackoverflow.com/questions/26146549/chrome-cuts-off-parts-of-type-on-the-left-firefox-and-ie-display-fine-chrome-b/26147290#26147290 — Paulie_D, Mar 27 '18 at 16:06
@Paulie_D letter spacing helped, but I'm not a fan of how it is spaced.Looks liked added a ` ` did the trick better. — cweave, Mar 27 '18 at 16:19
Don't use `svg`, `eot`, they're dead formats, and don't use `ttf`/`otf` if you already use woff. See https://stackoverflow.com/a/37091681/740553 for the long version of this comment. Basically you're using a `@font-face` rule set that was super necessary in 2012, but hasn't been necessary for over 2 years now. — Mike 'Pomax' Kamermans, Mar 27 '18 at 17:19

score 0 · Accepted Answer · answered Mar 27 '18 at 16:41

0

Adding letter-spacing: .08em; worked as well as adding   after the H1 tag. Solution and another solution.

answered Mar 27 '18 at 16:41

cweave

306
4
13

Font Being cut off by IE/ME

1 Answers1