Vertical centering doesn't seem to work using some typefaces in Chrome for mobile

user_2589257 0
Viewed 716

i don't understand why seems impossible to center vertically inside a container elements as headings , paragraph , span .. using some typefaces in Chrome for mobile.Seems to work better in Firefox for mobile instead. An example : Open-Sans works both on Firefox mobile and Chrome Mobile.Center vertically using font family Raleway , for example , seems possible with Firefox mobile only.

    #x-wrapper {
      
      position:absolute;
      left:100px;
      font-family:'Open Sans',sans-serif;font-weight:400;
      
     }
    
    #y-wrapper {
      position:absolute;
      left:200px;
      font-family:'Oswald',sans-serif;font-weight:400;
     }
    
    .circle {
      width:50px;
      height:50px;
      border:1px black solid;
      border-radius:25px;
      }
      
      .hello{
        position:relative;
        height:100%;
        width:100%;
       }
      
      .hello h5 {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        margin:0px;
<!DOCTYPE html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  </head>

  <body>
    <div id="x-wrapper" class="circle">
      <div class="hello">
        <h5>hello</h5>
      </div>
    </div>
    <div id="y-wrapper" class="circle">
      <div class="hello">
        <h5>hello</h5>
      </div>
    </div>
  </body>
</html>

typeface google-chrome font-family css html
3 Answers

This problem might be caused by non-Latin characters in the font. Essentially, it's not a CSS issue but the actual font that has this additional space between the characters and the baseline.

Try adding this to your @font-face declaration:

@font-face {
    /* latin only */
    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;
}

If you're self hosting the font, you can also run the source font file (e.g. ttf) through Font Squirrel's Webfont Generator and choose Latin-only subsetting which would also have the benefit of a smaller font file.

user_5860300
Related