Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
'Menlo' font not triggering non-monospaced render on Chrome/Android.
<!doctype html>
<html>
<head>
<style>
.monospace {
font-family: Menlo, Monaco, "Droid Sans Mono", Consolas, "Lucida Console", "Courier New", monospace;
}
.monospace_without_menlo {
font-family: Monaco, "Droid Sans Mono", Consolas, "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<pre class="monospace">
0 1 2 3 4 5 6 7 8 9
1 a b c d e f g h i
2 j k l m n o p q r
3 s t u v w x y z A
4 B C D E F G H I J
5 K L M N O P Q R S
6 T U V W X Y Z a b
7 c d e f g h i j k
8 l m n o p q r s t
9 u v w x y z A B C
</pre>
<pre class="monospace_without_menlo">
0 1 2 3 4 5 6 7 8 9
1 a b c d e f g h i
2 j k l m n o p q r
3 s t u v w x y z A
4 B C D E F G H I J
5 K L M N O P Q R S
6 T U V W X Y Z a b
7 c d e f g h i j k
8 l m n o p q r s t
9 u v w x y z A B C
</pre>
</body>
</html>
@bear454

This comment has been minimized.

Copy link
Owner Author

commented Oct 14, 2013

screenshot

@nathancarnes

This comment has been minimized.

Copy link

commented Oct 14, 2013

@bear454 ---

My guess is you're including Menlo as a webfont and not providing an SVG version for Android. Any possibility that's the case?

@nathancarnes

This comment has been minimized.

Copy link

commented Oct 14, 2013

Or the SVG version is being sent with the wrong content type or something.

Obviously the browser thinks it found Menlo, then can't load it for some reason. So instead of moving farther down the font stack (because it thinks it has Menlo), it's falling all the way back to the default system font as a last-ditch effort to render the text.

@bear454

This comment has been minimized.

Copy link
Owner Author

commented Oct 15, 2013

No web fonts in use; and 'Menlo' font isn't on the system - its the default terminal font in OS X, and not readily available elsewhere.

So, either (a) Android is telling Chrome the font is available, and sending the wrong substitute, using the *_fonts.xml mechanism (see https://android.googlesource.com/platform/frameworks/base/+/52c489cd63cca0361f374f7cb392018fabfa8bcc/data/fonts/system_fonts.xml for example), or (b) Chrome/Android isn't following the font-face spec. Either way, sucks.

@bear454

This comment has been minimized.

Copy link
Owner Author

commented Oct 15, 2013

Additional debug details: I'm getting the error on Chrome 30.0.1599.82/Android 4.2.2 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.