CODEWITHSUNDEEP
iphoneiosgoogle-webfonts
techsMex
techsMex

Reputation: 604

Google Webfonts not loading consistently on iPhone5

On iPhone5 Safari I am finding that most of the time my page renders using default fonts before a google web font loads BUT the page is not re-rendered when google fonts finish loading. I'm not seeing this problem in desktop browsers or WindowsPhone, on these platforms I have not seen any problems wrt fonts being displayed.

Do I need to use the webfonts API to manually tell the page to redraw somehow? This seems overkill so maybe I'm missing something?

I load the fonts in as follows:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <link href='http://fonts.googleapis.com/css?family=Dosis:300,400,500' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css" />
</head>

I define some styles in a separate CSS file and then use these styles in the body of my page.

.defaultHeading {
font-family: 'Dosis', sans-serif; 
font-size:36px; 
color:#a02422; 
font-weight:500; 
line-height:36px 
}

Upvotes: 1

Views: 2603

Answers (1)

techsMex
techsMex

Reputation: 604

OK, I fixed all my problems by specifying the following in the CSS

@media only screen and (max-device-width: 480px) {      
    #main { -webkit-text-size-adjust:100% }               
}

This stops Safari from resizing fonts on iPhone.

Upvotes: 1

Related Questions