CODEWITHSUNDEEP
cssiphonegoogle-chrome
code-8
code-8

Reputation: 58790

iPhone browser style doesn't match Chrome simulation

I’m struggling right now.

I’m not sure my preloader display very differently on the iPhone even on Safari or Chrome.

enter image description here

Note :

I've tried clear cache on iPhone settings already. It should reproduce all the time at: http://206.189.186.68/

Result : The font load very differently

HTML

<div class="mobile-loader">
    <div class="d-flex flex-column align-items-center h-100 justify-content-center">
        <div class="row tex-left">
            <div class="col-sm-auto">
                <h1 class="ml2 mb-0">The New Protein</h1>
                <h1 class="ml4" style="margin-top: -12px;">Map</h1>
                <h6 class="ml3" style="font-family: futuralilghtdcd;">By OLIVA FOX CABANE</h6>
            </div>
        </div>
    </div>
</div>

CSS

@font-face {
    font-family: 'futuralilghtdcd';
    src: url('/fonts/FuturaDCD-Boo.eot');
    src: url('/fonts/FuturaDCD-Boo.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaDCD-Boo.woff') format('woff'),
       url('/fonts/FuturaDCD-Boo.ttf') format('truetype'),
       url('/fonts/FuturaDCD-Boo.svg#Futura DC D Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

Is it because of the way I declared my font in CSS is not accepting by iPhone ?

Upvotes: 0

Views: 288

Answers (1)

umbriel
umbriel

Reputation: 751

What you are likely seeing how Safari and Chrome handles fonts that overrides each other. A small cleanup should fix it.

You are declaring futura in your headers like so:

h1, h2, h3, h4, h5, h6 {
   font-family: 'futura', sans-serif; 
}

But you've already declared futura in your body:

html,body,button,input,optgroup,select,textarea,.tooltip,.popover {
    font-family: 'futura', sans-serif;
}

Normally this is not problematic, but looking at how you are declaring @font-face in your custom.css its likely that the two browsers differ.

If you want to load a specific futura weight like futuralilghtdcd I would comment out the headers setup:


/* dont need this; */

h1, h2, h3, h4, h5, h6 {
  /* font-family: 'futura', sans-serif; */
}


/* Apply certain @font-face declaration as low-level as possible */

html,body,button,input,optgroup,select,textarea,.tooltip,.popover {
    font-family: 'futuralilghtdcd', sans-serif;
}

/* Even better */

html, body {
    font-family: 'futuralilghtdcd', sans-serif;
}

Also its a good idea to keep using same namespace font-family: futura throughout the different font-face declarations:

Here you have two separate names: futurabold and futura, they can both share the same name, but they can have different font-weights. The browser will handle the rest as long as you use font-weight: bold, or <b> etc.

/* current */
@font-face {
    font-family: 'futurabold';
    src: url('/fonts/FuturaCon-ExtBol.eot');
    src: url('/fonts/FuturaCon-ExtBol.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-ExtBol.woff') format('woff'),
       url('/fonts/FuturaCon-ExtBol.ttf') format('truetype'),
       url('/fonts/FuturaCon-ExtBol.svg#Futura Cond Extra Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'futura';
    src: url('/fonts/FuturaCon-Med.eot');
    src: url('/fonts/FuturaCon-Med.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-Med.woff') format('woff'),
       url('/fonts/FuturaCon-Med.ttf') format('truetype'),
       url('/fonts/FuturaCon-Med.svg#Futura Cond Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Better */
@font-face {
    font-family: 'futura';
    src: url('/fonts/FuturaCon-ExtBol.eot');
    src: url('/fonts/FuturaCon-ExtBol.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-ExtBol.woff') format('woff'),
       url('/fonts/FuturaCon-ExtBol.ttf') format('truetype'),
       url('/fonts/FuturaCon-ExtBol.svg#Futura Cond Extra Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'futura';
    src: url('/fonts/FuturaCon-Med.eot');
    src: url('/fonts/FuturaCon-Med.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-Med.woff') format('woff'),
       url('/fonts/FuturaCon-Med.ttf') format('truetype'),
       url('/fonts/FuturaCon-Med.svg#Futura Cond Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

Hope this helps a bit

Upvotes: 1

Related Questions