CODEWITHSUNDEEP
htmlcssmobilefont-facewebfonts
radialmaster
radialmaster

Reputation: 3

Why won't the assigned font family load on mobile?

I have been dealing with this issue all day and I can't seem to find a solution at all to why this is happening. The font family that I'm trying to set for the text on my website won't load on any other device at all, no matter what I try to do. It only loads on PC but nothing else that I test the site on. It's seriously annoying me.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");

@font-face {
font-family: "Roboto", sans-serif;
src: url("fonts/roboto-v20-latin-regular.eot");
src: url("fonts/roboto-v20-latin-regular.eot") format("embedded-opentype"),
     url("fonts/roboto-v20-latin-regular.woff2") format("woff2"),
     url("fonts/roboto-v20-latin-regular.woff") format("woff"),
     url("fonts/roboto-regular.ttf") format("truetype"),
}

@font-face {
  font-family: "Roboto Light", sans-serif;
  src: url("fonts/Lightversion/Roboto-Light.eot");
  src: url("fonts/Lightversion/Roboto-Light.eot") format("embedded-opentype"),
       url("fonts/Lightversion/Roboto-Light.ttf") format("truetype"),
       url("fonts/Lightversion/Roboto-Light.woff") format("woff");
}

body {
  font-family: "Roboto", "Roboto Light", sans-serif;
  margin: 0 auto;
  background-image: url(../images/playstation-pattern.png);
  background-repeat: repeat;
  background-position: center;
}

.welcome {
  height: 100%;
  display: flex;
  color: #404040;
  font-family: "Roboto Light", sans-serif;
  text-align: center;
  line-height: normal;
}

.inner-welcome {
  width: 300px;
  margin: auto;
}

.welcome h2 {
  margin-top: 0;
  font-family: "Roboto Light", sans-serif;
  font-weight: bold;
}

.welcome p {
  margin-bottom: 0;
}

a:link {
  text-decoration: none;
  font-weight: bold;
  color: #404040;
}

a:hover {
  filter: brightness(1.75);
  color: #404040;
}

a:visited {
  text-decoration: none;
  color: #404040;
}

i {
  font-weight: normal;
}

Upvotes: 0

Views: 549

Answers (2)

VSM
VSM

Reputation: 1785

Hope this works for you.

The Roboto don't family isn't imported properly. Here you have tried to import locally and remotely using Google font api. It is wrong. You should follow only one method of above. The reason for issue occurs in all other devices and not in PC is that Roboto font has been installed to the PC. As other devices couldn't find Roboto font internally, they are trying to load that fallback font called sans serif.

Remove that import css rule and try to link Google font inside header tag of your index.html as shown below 

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap">

Upvotes: 0

Bjorn.B
Bjorn.B

Reputation: 1705

Try this: Taken from the google fonts site, add the following to the head of your document:

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>

and then add the following in your stylesheet:

font-family: 'Roboto', sans-serif;

This should take care of the Roboto Font.

In terms of the Light font, confirm that the fonts are in the /fonts/ folder in your site directory. It looks like it's using a fallback.

Upvotes: 1

Related Questions