I am running into a strange issue in Chrome on a Nexus 7, Android

Question

0

Editorial Team

Asked: June 12, 20262026-06-12T06:31:40+00:00 2026-06-12T06:31:40+00:00

I am running into a strange issue in Chrome on a Nexus 7, Android

0

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/