Font family not working on html,css

@font-face {
font-family: 'Main UI';
src: local('./BebasNeue-Regular.ttf'), url('https://fonts.google.com/specimen/Bebas+Neue') format('woff2');
}

html, body {
margin: 0;
padding: 0;
}
#topBar {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 9vh;
z-index: 10;
background-color: #f5f5f5;
}
#textBox {
justify-content: center;
transform: translate(2%, -20%);
}

#navbarText {
display: flex;
justify-content: center;
list-style-type: none;
transform: translate(0%, -12%);
font-size: 6.5vh;
color: #050505;
}

#navbarText li {
font-family: 'Main UI', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: inline-block;
margin-right: 10px;
}
@font-face {
font-family: 'Main UI';
src: local('./BebasNeue-Regular.ttf'), url('https://fonts.google.com/specimen/Bebas+Neue') format('woff2');
}

html, body {
margin: 0;
padding: 0;
}
#topBar {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 9vh;
z-index: 10;
background-color: #f5f5f5;
}
#textBox {
justify-content: center;
transform: translate(2%, -20%);
}

#navbarText {
display: flex;
justify-content: center;
list-style-type: none;
transform: translate(0%, -12%);
font-size: 6.5vh;
color: #050505;
}

#navbarText li {
font-family: 'Main UI', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: inline-block;
margin-right: 10px;
}
<div id="textBox">
<ul id="navbarText">
<li id="home"><i class="fa fa-home"></i> Home</li>
<li id="shop"><i class="fa fa-shopping-cart"></i> Shop</li>
<li id="about"><i class="fa fa-info-circle"></i> About</li>
</ul>
</div>
<div id="textBox">
<ul id="navbarText">
<li id="home"><i class="fa fa-home"></i> Home</li>
<li id="shop"><i class="fa fa-shopping-cart"></i> Shop</li>
<li id="about"><i class="fa fa-info-circle"></i> About</li>
</ul>
</div>
3 Replies
MarkBoots
MarkBoots11mo ago
the url is not the font, but a stylesheet. (just open that url in your browser and you'll see) you can import that stylesheet in your <head> and then just reference the font name. (or copy it into your css) But please consider serving the font yourself (download it into your project) instead of loading it from google. (cookies, tracking, etc)
clevermissfox
clevermissfox11mo ago
There was a lawsuit recently in the UK bc a site linked a google font which created a privacy issue that was illegal. Whenever possible host your own fonts and make sure they are optimized. Font squirrel is a helpful tool for optimizing it simply and easily Sorry didn’t mean to reply to your comment !
Neσ许
Neσ许11mo ago
I wonder is it okay to download the font from cdn website and then host it by yourself Or using cdn of the link could make you help to escape from legal troubles or not? Since the service hosting it publicly so. For example using Helvetica for your website and using cdn way aka importing it from internet
Want results from more Discord servers?
Add your server