Skip to content

Instantly share code, notes, and snippets.

@bear454
Created October 14, 2013 21:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bear454/6982879 to your computer and use it in GitHub Desktop.
Save bear454/6982879 to your computer and use it in GitHub Desktop.
'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
Copy link
Author

bear454 commented Oct 14, 2013

screenshot

@nathancarnes
Copy link

@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
Copy link

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
Copy link
Author

bear454 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
Copy link
Author

bear454 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