CODEWITHSUNDEEP
cssfont-face
Improviser 14
Improviser 14

Reputation: 35

Custom font not connecting on mobile

I'm using a custom font on my webpage and it works fine on the desktop version, but on mobile devices, the font doesn't change. I think I must be doing something wrong with the font-face property. Here is the CSS file. Any ideas?

html, body {
      height: 100%;
      width: 100%;
    }

body {
  background-image: url("/images/Portrait.jpg");
  font-family: Occupied,Arial,sans-seriff;
}


@font-face {
  font-family:"Occupied";
  src: url("/public/font/Occupied.eot?") format("eot"),
       url("/public/font/Occupied.woff") format("woff"),
       url("/public/font/Occupied.otf") format("otf"),
       url("/public/font/Occupied.woff2") format("woff2"),
       url("/public/font/Occupied.ttf") format("truetype"), 
       url("/public/font/Occupied.svg#Occupied") format("svg");
  font-weight:normal;
  font-style:normal;
}

Upvotes: 0

Views: 2021

Answers (2)

Dulara Malindu
Dulara Malindu

Reputation: 1637

I found this article on csstricks.com website. there they have clearly mentioned that, The @font-face rule should be added to the stylesheet before any styles.

additionally, the CSS is executed line by line. when It wants finding a font which is not defined yet it fallbacks to the default font. in this case, it's sans-seriff which should be corrected as sans-serif. some browsers are smart enough to detect those kind small mistakes and correct them. But It is not guaranteed by every browser.

Upvotes: 1

Partho63
Partho63

Reputation: 3116

Try adding @font-face first

@font-face {
  font-family:"Occupied";
  src: url("/public/font/Occupied.eot?") format("eot"),
       url("/public/font/Occupied.woff") format("woff"),
       url("/public/font/Occupied.otf") format("otf"),
       url("/public/font/Occupied.woff2") format("woff2"),
       url("/public/font/Occupied.ttf") format("truetype"), 
       url("/public/font/Occupied.svg#Occupied") format("svg");
  font-weight:normal;
  font-style:normal;
}

html, body {
      height: 100%;
      width: 100%;
    }

body {
  background-image: url("/images/Portrait.jpg");
  font-family: Occupied,Arial,sans-seriff;
}

Upvotes: 1

Related Questions