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" > Engineering Project </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>