Jump to content
Sign in to follow this  
Simoni

font are not display on android

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>

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...