I'm attempting to create a website to sell my records on, and I'd like to use a .ttf file (OldEnglish.ttf) to create a font family to use for my headers. I can't figure out for the life of me why it won't work...
All other styling is functional with the exception of the font family. I'm expecting the font family to work too. Here's the relevant code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sacralized Records</title>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<h1>Sacrilege Records</h1>
<style>
@font-face {font-family: OldEnglish; src: url(./OldEnglish.ttf);}
h1{font-family: OldEnglish; margin: 0; padding: 0; font-size: 114px; text-align: center; background-color: black; color: white; margin-top: 0px; }
body,h2, h3, p, ul, li {margin: 0; padding: 0;}
.toolbar {background-color: black; display: flex; justify-content: space-around; align-items: center; }
.section {color: white; cursor: pointer; padding: 10px 20px; transition: background-color 0.3s; }
.section:hover {background-color: #555;}
.butt{font-family: OldEnglish; color: white; text-align: center;display: inline-block; font-size: 24px; cursor: pointer; text-decoration:none;}
.merchandise {display: flex; justify-content: space-around; align-items: center; padding: 20px;}
.bio-container {background-color: #f5f5f5; padding: 20px; margin: 30px auto; max-width: 1200px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);}
.bio-container h2 {font-family: OldEnglish; font-size: 120px; margin-bottom: 10px;}
.bio-container h3 {text-align: center; font-family: OldEnglish; font-size: 80px; margin-bottom: 10px;}
.bio-container p {font-family: OldEnglish; text-indent: 50px; font-size: 27px; line-height: 1.5; color: #333;}
.product {border: 1px solid #ccc; padding: 15px; margin: 10px; width: 300px; display: inline-block; vertical-align: top;}
.product h2 {margin: 0;}
.product p { margin: 0;}
.product button {background-color: #4CAF50; color: white; border: none; padding: 8px 12px; cursor: pointer;}
#cartItems {list-style: none; padding: 0; }
#cartTotal {font-weight: bold;}
</style>
</head>
<body>
<header>
<nav class="toolbar">
<div class="section" id="section1"> <a href="RSHome.html" class="butt">
Home
</a></div>
<div class="section">
<button class="butt" id="cartButton" onclick="showCart()"> Cart</button>
</div>
</nav>
<nav class="toolbar">
<div class="section" id="section1"> <a href="RSAll.html" class="butt">
Shop All
</a></div>
<div class="section" id="section1"> <a href="RSRecords.html" class="butt">
Records
</a></div>
<div class="section" id="section2"><a href="RSTapes.html" class="butt">
Tapes
</a></div>
<div class="section" id="section3"><a href="RSCDs.html" class="butt">
CDs
</a></div>
</nav>
</header>