I am confident that my code is correct. Here's a snippet from what I've done:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homepage.css"/>
</head>
<body>
<div id="menu">
<p>THE BIG BLUE SITE OF SAILING KNOWLEDGE</p>
</div>
</body>
</html>
CSS:
@font-face: {font-family: "ostrich-reg"; src: url('Fonts/ostrich-regular-webfont.ttf'); }
@font-face: {font-family: "ostrich-light"; src: url("Fonts/ostrich-light.ttf"); }
@font-face: {font-family: "collab"; src: url("Fonts/ColabThi.otf"); }
#menu {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
height: 100vh;
width: 27%;
background: #2d5dac;
text-align: center;
}
#menu p {
color: white;
font-family: ostrich-reg;
font-size: 60px;
}
After thorough checking, there seems to be minimal room for error. The fonts are sourced from Font Squirrel, which is typically reliable. Despite trying various files and formats (.otf), the fonts still fail to load. Any insights on this issue would be greatly appreciated.
As a sidenote, I acknowledge that this may not function properly on Internet Explorer, as this project is in its early stages of development.
The font filtering process yields no results, leading me to believe that the fonts are indeed not loading. However, the file path appears to be accurate, with the Fonts folder located alongside the .html file, containing the necessary font files directly within it.