I've encountered an issue while setting up a website for a client concerning the fonts. Most fonts are displaying correctly, but there is one font, "chunkfive", that is not working as expected. The problem becomes more severe in Internet Explorer where two fonts fail to work, and in Edge where none of the fonts display properly. Below is the code snippet I am currently using:
@font-face {
font-family: 'chunkfive';
src: url('fonts/chunkfive-webfont-webfont.woff2') format('woff2'),
url('fonts/chunkfive-webfont-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
url('fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'streetwear';
src: url('fonts/streetwear-webfont.woff2') format('woff2'),
url('fonts/streetwear-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1,
h2,
h3,
h4,
h5 {
font-family: streetwear, serif;
}
nav {
background: #000;
border: solid 4px #FFF;
font-family: chunkfive, serif;
font-size: 22px;
left: 50%;
margin-left: -425px;
position: absolute;
top: 143px;
width: 850px;
z-index: 0;
}
ol,
p,
ul {
font-family: roboto, sans-serif;
font-size: 18px;
}
Although the fonts render perfectly on my demo website, they seem to have issues when uploaded to a GoDaddy account. Surprisingly, Chrome throws an error for each font file, even though all fonts except chunkfive appear correctly:
GET http://website-url.com/css/fonts/streetwear-webfont.woff2
Could this be due to any restrictions imposed by GoDaddy on how fonts can be utilized, or do I need to troubleshoot something else?