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

Question

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?

I am having the same problem, have you found a solution? I'm going to make two different CSS for Mac and Win, Safari on Mac has the same problem as Chrome-Mac. — Michele Gargiulo, Sep 02 '13 at 12:52
No, I haven't found any solution, it seems like the fonts are simply rendered differently on mac and windows... — zsombornagy, Sep 03 '13 at 08:54
See `Win Ascent` and `HHead Ascent` https://stackoverflow.com/a/39425906/6066470 — Nick, Dec 28 '17 at 08:27

score 6 · Answer 1 · answered Sep 30 '19 at 12:34

6

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

answered Sep 30 '19 at 12:34

Max

541
6
9

1

This worked for me. The font file provided had extra spacing at the top for mac, but below for windows. That website sorted it! – Matt Inamdar Apr 26 '21 at 19:29
Amazing, just what I needed as well. Most of the answers online where regarding line-height in css, but this was the solution for me as padding was only on the bottom and only on mac. – VPetrovic Jun 12 '23 at 07:06

score 1 · Answer 2 · answered May 22 '14 at 23:35

1

It seems that with web fonts, mac safari (and other browsers on mac?) puts the text at the top of the line box - if you switch back to arial, the text will jump back down where it belongs. I haven't found a solution for this, but knowing the problem gave some relief (I switched back to arial for the header I had to fix).

answered May 22 '14 at 23:35

mroberts

11
1

1

Is there really no real solution for this? It's making me mad. – fritzmg Apr 06 '17 at 06:29

score 0 · Answer 3 · answered Nov 04 '12 at 01:06

0

Using a CSS Reset will help keep the fonts looking somewhat similar cross-browser:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

This font issue is a known bug, I even experienced a bit of inconsistency when using your code with this CSS reset. Basically it resets the CSS to get rid of differences in browser interpretation. Good luck and let me know if you have questions! You can read into more of the details here: http://meyerweb.com/eric/tools/css/reset/

answered Nov 04 '12 at 01:06

Parker Young

1,165
8
9

thanks! I've copy-pasted this CSS, and here's the result, the spacing is smaller, but still there is a difference :( http://dl.dropbox.com/u/1421735/font-meyer-reset.html – zsombornagy Nov 04 '12 at 08:11
Try putting your text inside of a
or
or something of the sort to get a more accurate view of what the font will look like. As I said before, it is a known bug with Chrome on Mac and PC. Good luck!
– Parker Young Nov 04 '12 at 11:01
I put it into a
, but it does not improve anything unfortunately. And I have the same difference between Firefox/Mac and Firefox/Win. Seems like somehow the google webfont is different on Mac and on Windows... But thanks for the suggestions! Can you point me to some description of this known bug?
– zsombornagy Nov 04 '12 at 17:07
Each of the browsers have their own way of displaying fonts. Maybe switching to a different font or using a different method altogether will help. I hope you can get this solved. 1) http://stackoverflow.com/questions/6542046/raleway-font-adding-additional-padding-to-the-top-of-text-on-windows-only – Parker Young Nov 04 '12 at 20:26
2) http://css-tricks.com/forums/discussion/17602/padding-different-in-chrome-mac-versus-chrome-win/p1 – Parker Young Nov 04 '12 at 20:28
3) http://stackoverflow.com/questions/11726442/font-rendering-line-height-issue-on-mac-pc-outside-of-element – Parker Young Nov 04 '12 at 20:29
1

Thank you! I probably have to find another font. – zsombornagy Nov 05 '12 at 07:31

score 0 · Answer 4 · answered Nov 04 '12 at 01:11

I would suggest you use something less intrusive than Meyer's reset as it goes unnecessarily far. Normalize.css is a good bet. http://necolas.github.com/normalize.css/

    /*! normalize.css v2.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Removes default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}


/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Sets consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * Removes border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

thanks for the answer! unfortunately with this CSS the difference is even bigger :( http://dl.dropbox.com/u/1421735/font-normalize.html — zsombornagy, Nov 04 '12 at 08:14

score 0 · Answer 5 · answered Aug 13 '13 at 20:57

0

I had this issue using @font-face with a font called Libel Suit. I didn't put any margins or padding on my h1s and h2's but when I tested on Chrome and Firefox for Windows, it displayed a large amount of extra space above the header. I fixed it by simply adding line-height: normal; in css.

answered Aug 13 '13 at 20:57

rpd

38
1
7

Hi, thanks for the answer! I've just tried it, but it doesn't seem to make any difference in this case. I added `line-height: normal;` to the HTML at the URL in the question, but it still has a large amount of extra space above the text in Windows. Is there maybe something else in your CSS which I would need? Or maybe it's the different font. – zsombornagy Aug 14 '13 at 09:00

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

5 Answers5

or something of the sort to get a more accurate view of what the font will look like. As I said before, it is a known bug with Chrome on Mac and PC. Good luck!