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?
For me, reconverting using this: https://transfonter.org/ with the "Fix vertical metrics" option enabled, solved my problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With