Menu
I am running into a strange issue in Chrome on a Nexus 7, Android 4 tablet.
When I try to style a p tag with a web font, the font will not render until it is after a certain emor px size:
The CSS:
@font-face {
font-family: 'mija';
src: url('/assets/fonts/mija-reg/mija-reg.eot');
src: url('/assets/fonts/mija-reg/mija-reg.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/mija-reg/mija-reg.woff') format('woff'),
url('/assets/fonts/mija-reg/mija-reg.ttf') format('truetype'),
url('/assets/fonts/mija-reg/mija-reg.svg#mija') format('svg');
font-weight: normal;
font-style: normal;
}
p {
font-size: 16px;
font-family: 'mija'
}
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
</head>
<body>
<p>Hello world</p>
</body>
</html>
In this instance, anything 17px and above will correctly render the font.
This is only happening on the p tag. Every other element will render the font at any size without issue.
I have tried with 3 different font families. I am not using any normalize files or any other CSS.
I attempted to create a fiddle but the web font is not pulling from Google's web service on Android Chrome:
http://jsfiddle.net/yxcec/4/
339
Totally agree that this is a bug as already answered by @Yahreen.
I noticed that whilst I had this problem with a site I was working on that some pages seemed to work better than others. So I spent some time to try and work out why this was and if any sort of "workaround" could be used in the meantime.
I personally had problems getting Webfonts to render correctly on Chrome in Android - Nexus S and Nexus 7.
I've found that if you play with the width of your elements it appears to be possible to workaround the bug to some extent and still get web fonts under 18px to render correctly.
In the sample code attached it seems everything works on a max width of 88.8%. You can have a wider first DIV but then it breaks the ones underneath. Everything only seems to work at that magic percentage. It might be an ok workaround for some people. Your mileage may vary and you may need to play with the percentages - I needed to tweak the percentage up slightly in a responsive layout (gridpak) but I suspect it probably still conforms to the same sort of logic in overall percentage terms. After all the behaviour of this bug is strange but this does seem to sort of stabilise it into some usable pattern and maybe this helps you out.
Somebody else might understand a bit deeper what is at play here and maybe offer some more advice/explanation.
You can see the test here: http://richhollis.github.com/grumpy-wizard-font-test/
<!DOCTYPE>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Grumpy Wizards</title>
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>
<style>
body { font-family: 'Finger Paint', cursive; }
</style>
</head>
<body style="margin:0; padding:0; background-image: url('http://www.thezorklibrary.com/history/image/grumpy_wizard1a.png')">
<div style="width: 88.8%; background: red; opacity: 0.8">
<h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
<h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>
<p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
<p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
</div>
<div style="width: 88.8%; background: yellow; opacity: 0.8">
<h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
<h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>
<p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
<p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
</div>
<div style="width: 88.8%; background: purple; opacity: 0.8">
<h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
<h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>
<p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
<p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
</div>
<div id="size"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script>$(function(){
$("#size").text("window.innerWidth = " + window.innerWidth);
});</script>
</body>
</html>
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
