Home/ Questions/Q 796645
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:40:21+00:00

I’m using a custom font and the @font-face tag. In Windows, everything looks great,

  • 0

I’m using a custom font and the @font-face tag. In Windows, everything looks great, regardless of whether it’s Firefox, Chrome, or IE.

On Mac, it’s a different story. For some reason, the Mac font renderer thinks the font is a lot shorter than it is.

For example, consider this test code (live example here): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Webble</title>
        <style type="text/css">
        @font-face
        {
            font-family: "Bubbleboy 2";
            src: url("bubbleboy-2.ttf") format('truetype');         
        }

        body
        {
            font-family: "Bubbleboy 2";
            font-size: 30px;
        }

        div
        {
            background-color: maroon;
            color: yellow;
            height: 100px;
            line-height: 100px;
        }
        </style>
    </head>
    <body>
        <div>The quick brown fox jumped over the lazy dog.</div>
    </body>
</html>

Open it on Windows Firefox and on Mac Firefox. Use your mouse to select it.

On Windows, you’ll notice it fully selects the font.

On Mac, it only selects about half the font. If you look at what it is selecting, you’ll see that that part has been centered, instead of the full height of the font.

Is there anyway to fix this rather large discrepancy?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The font’s ascent is too small. The Windows browsers (and Mac Safari, too, in my testing) just throw out the ascent value as incorrect, whereas Firefox and Opera on the Mac accept it.

    The easiest way to fix this is with ttx, part of FontTools.

    Use it like this:

    % ttx bubbleboy-2.ttf
[...]
% edit bubbleboy-2.ttx

    Change the ascent value to 1100 (or whatever works for you):

      <hhea>
    <tableVersion value="1.0"/>
    <ascent value="1100"/>

    Then reconstitute the font:

    % ttx bubbleboy-2.ttx 
Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"...
[...]

    This new font should be fixed; you can check by opening it in Font Book.

    If you want a more visual picture of the problem, try FontForge, though be warned its interface is rather baroque. Once you’ve opened the font, double-click a capital letter; you’ll see a horizontal line bisecting the glyph. This is the (wrong) ascent. You can fix the ascent in Element > Font Info, then click General. Uncheck “Scale Outlines” or the ascent will be bigger but still wrong. 🙂

    However, to modify the font, I would recommend ttx over FontForge for small changes like this because it’s less likely to destroy what it doesn’t understand.

    • 0