CODEWITHSUNDEEP
htmlcssiphoneipadfonts
Laëtitia C
Laëtitia C

Reputation: 45

Font displayed twice on Ipad2 and iphone4 - working fine on other desktop browsers

I use fontsquirrel's & google's fonts and they work perfectly fine on desktop browsers (IE, safari,chrome, firefox). But when it comes to mobile safari, specially ipad2 and iphone4, the font appears twice, meaning, it shows 2 times the same word as if it was twice the same text ! The problem is on the H1. I tried using sans serif font and it's the same... I tried to change the font-weight, font-size etc but it doesn't change anything.

body {
color:#FFF; 
font-family: 'Raleway', sans-serif;
font-weight: normal;
/*font-family: 'Open Sans', sans-serif;*/
min-width:960px;
top:0;
left:0;
position:absolute;
height:100%;
width:100%;
margin:0;
background-size:cover;
}

.ie body {
filter: dropshadow(color=#000000, offx=0, offy=1);  }

h1 {
font-size:88px; 
text-align:center; 
padding-top:30px;
font-weight:700;
font-family:'quicksandregular',arial, sans-serif;
}

@media screen and (max-width:768px){  /* tablettes */
body {
min-width: initial !important;
font-weight: normal; /* */
font-size: 68px; /* */
}

.wrapper{ 
    width:100%; 
}
.styled div {
margin-bottom:10px; 
}}

@media screen and(max-width:420px){ /* tel */
body{
    font-weight: normal; /* */
    font-size: 68px; /* */
}
h1{

float:initial;
text-align: center;
margin-left:0px;
margin-bottom:0px;
}
#header {
    width: 100%; 
}
.styled div {
  margin-bottom:10px;
  font-size: 40px;
  font-weight: normal; 
  text-align: center;
  width:80px; 
  border-radius:80px; 
  height:80px;  
}
#Content h2 {
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: center;
font-size: 29px;
font-weight: 300;
}

Many thanks for your help !! Laëtitia

Upvotes: 4

Views: 400

Answers (1)

katzkode
katzkode

Reputation: 2001

The browser is applying a bold font weight, which is causing the problem because there is no bold quicksand. All you have to do is set font-weight:normal; for text elements that are appearing twice.

Your problem is talked about at length here:

http://www.fontsquirrel.com/forum/discussion/277/webfonts-showing-up-twice/p1

Upvotes: 2

Related Questions