Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

text with google web font has different top spacing in chrome/windows and chrome/mac

I'm trying to use a google webfont (Josefin Sans), and on windows it has a big spacing at the top, while on mac it does not have it. Here's an example page:

http://dl.dropbox.com/u/1421735/font.html

Here are the screenshots from chrome/windows and chrome/mac:

https://dl.dropbox.com/u/1421735/chrome-win.png

https://dl.dropbox.com/u/1421735/chrome-mac.png

Here's the source of the page:

<!DOCTYPE html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
    <style>
      body {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 50px;
      }
    </style>
  </head>
  <body>
      Josefin Sans
  </body>
</html>

Any suggestion how can I make them look the same?

like image 640
zsombornagy Avatar asked Nov 03 '12 18:11

zsombornagy


1 Answers

For me, reconverting using this: https://transfonter.org/ with the "Fix vertical metrics" option enabled, solved my problem.

like image 60
Max Avatar answered Oct 22 '22 14:10

Max