I have almost finished the design of my site, but I'm encountering a problem with installing and using a specific font. Do .woff files only display on the web once connected to a server? I'm quite confused about this. Despite following the provided guide word for word, something seems to be amiss.
In my code, you can observe how I inserted the code source in my HTML and attempted to apply it to my nav.logo file.
Here's an example of how I'm incorporating the font in CSS:
<!DOCTYPE html>
<html>
<head>
<title>DADD | Stream Music, Connect, & Merch | DADD </title>
<!-- Font imports -->
<style type="text/css">
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8fd2ccbb-9bc3-4d04-babb-ab917cc454a1&fontids=738462");
@font-face {
font-family: "Microgramma W02 Bold Ex";
src: url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2") format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
@font-face {
font-family: "MicrogrammaExtDBol W05 Regular";
src: url("Fonts/5121482/ea58eeb8-638f-456c-8376-d46061bcb9ba.woff2") format("woff2"),
url("Fonts/5121482/dbcf51ac-03ab-42bb-a698-bafb9867305c.woff") format("woff");
}
</style>
<!-- Javascript for font tracking -->
<script type="text/javascript">
var MTUserId='';
var MTFontIds = new Array();
MTFontIds.push(""); // Microgramma™ W02 Extended Bold
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src='mtiFontTrackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<!-- Linking external resources -->
<link rel="icon" href="LOGODADD.png" type="image/png">
<link rel="stylesheet" href="dadd1.css">
<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<meta charset="UTF-8">
</head>
<body>
<nav class="nav">
<div class="container">
<div class="logo" id="navlogo">
<a href="daddhome.html">DADD</a>
</div>
<div class="main_list" id="mainListDiv">
<ul>
<li><a href="#">MUSIC</a></li>
<li><a href="daddmedia.html">MEDIA</a></li>
<li><a href="#">TOUR</a></li>
<li><a href="#">SHOP</a></li>
</ul>
</div>
<div class="media_button">
<button class="main_media_button" id="mediaButton">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<footer>
<p>D.R.E.A.M. LLC</p>
</footer>
</body>
</html>