Jump to content

font are not display on android


Simoni

Recommended Posts

hi forom piople 

i have a big problem that i dont succsed to solved for long time 

Setup description :
i used with the NodeMcu ESP8266 as a web server

Problem :  font are not display on android but can be shwon on iPhone and regular web brouser 

all my knowlge on HTML is 80% from this site 

please find below the code 
 

 
const char homePage[] PROGMEM = R"=====(                            
                            
                            <html>
                            <head>
                            <title> Engineering Project </title>
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                              <script src="https://kit.fontawesome.com/a076d05399.js"></script>

 <style>

body{
  margin-top: 10px;
  font-family: Times New Roman;
  background-color:#333333;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

  
h1{
 font-size: 3.5em; /* 40px/16=2.5em */
 margin: 0px auto 10px;

}
  

.buttonSetup {
 display: block;
 width: 130px;
 background-color: 2c3e50 ;
 border:4px solid #DAA520;
 color: #DAA520 ;
padding: 30px 30px;
text-decoration: none;
font-size: 50px;
margin: 0px auto 50px;
cursor: pointer;
border-radius: 10px;

}

.Cut {
 display: block;
 width: 130px;
 background-color: 2c3e50 ;
 border:4px solid #DAA520;
 color: #DAA520 ;
padding: 30px 30px;
text-decoration: none;
font-size: 50px;
margin: 0px auto 1px;
cursor: pointer;
border-radius: 10px;

}
.header_cut {
  background-color: #333333;
  border-width: 4px;
  border-color:  yellow;
  color: #f2f2f2;
  padding: 1px 1px;
  display: inline; 
  }

.button {
 display: block;
 width: 180px;
 background-color: 333333 ;
 border:4px solid #DAA520;
 color: #DAA520 ;
padding: 13px 30px;
text-decoration: none;
font-size: 50px;
margin: 0px auto 5px;
cursor: pointer;
border-radius: 4px;
}


.header_button {
  background-color: ;
  border-width: 7px;
  border-color:  yellow;
  color: #f2f2f2;
  padding: 15px 10px;
  }
  

.Cut {
  background-color: #333333;
  color: white;
  border-width: 7px;
  border-color:  #cccccc;
  }
  
  .buttonSetup {
  background-color: #333333;
  color: white;
  border-width: 7px;
  border-color:  #cccccc;
  }
  

.button-off:active {background-color: #2c3e50;}

.my_button:active {background-color: white;}


</style>
                            </head>
                            <body>

                            <center>
                          
                            <h1 class="header_button" > &nbsp; Engineering Project &nbsp;  </h1>
              
                            <a class="buttonSetup my_button" href="/calibration"> <i class="fas fa-users-cog"></i>
                            <i class="fas fa-cog fa-spin"></i></a>
                            <a class="Cut my_button" href="/cut_start" > <i class="fas fa-fan fa-spin"></i> </a>
                            <a class="header_cut my_button" href="/cut_start" > Start to Cat </a>

                            </center>

                           
                            </body> </html>

 

 

Link to comment
Share on other sites

Usually if a font isn't displayed on a given device, it doesn't have that font installed. It may also be referred to as something else, which is why it's important to use fallback fonts.

As an example, fallback fonts for "Times New Roman" is Times and Serif

So you can define it in your style as follows

.example-class {
  font-family: "Times New Roman", Times, serif;
}

Also, try using the forum's code block feature. It makes it easier for us to read your code.

XcQfW3F.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...