My HTML website uses an otf font-face which works perfectly on my computer desktop. However, when I deployed it to the host, the font-face stopped working. I have attached an image to illustrate the difference.
I have ensured that all the files, both on my desktop and the host, are identical.
<style>
@font-face
{
font-family: proxima-nova-regular;
src: url("proxima-nova-regular.otf") format("opentype");
}
@font-face
{
font-family: proxima-nova-regular-italic;
src: url("proxima-nova-regular-italic.otf") format("opentype");
}
@font-face
{
font-family: proxima-nova-bold-regular;
src: url("proxima-nova-bold-regular.otf") format("opentype");
}
@font-face
{
font-family: proxima-nova-bold-regular-italic;
src: url("proxima-nova-bold-regular-italic.otf") format("opentype");
}
html, body
{
margin: 0px;
padding: 0px;
}
.topbanner
{
width: 100%;
height: 35px;
background:rgb(35,35,35);
}
.topbannerinside
{
width: 200px;
height: 35px;
line-height: 35px;
text-align: center;
color: white;
float: right;
font-family: proxima-nova-regular;
}
.topbannerinside:hover
{
color: rgb(0, 232, 255);
}
.container
{
width: 1150px;
height: 400px;
background: rgb(250,250,250);
border-radius: 50px;
margin: auto;
position: relative;
}
.header
{
width: 350px;
height: 40px;
font-family: proxima-nova-regular;
font-size: 42px;
top: 30px;
left: 60px;
position: absolute;
}
.subheader
{
width: 500px;
height: 90px;
font-family: proxima-nova-regular;
font-size: 14px;
position: absolute;
left: 440px;
top: 30px;
}
.selectregion
{
width: 460px;
height: 280px;
background-size: cover;
background-image: url(samplescreen.png);
border: dashed;
border-color: black;
border-width: 1px;
position: absolute;
left: 55px;
top: 110px;
}
<!-- The rest of the code remains unchanged -->