Kevin Powell - Community•12mo ago

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•12mo 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•12mo 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σ许•12mo 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

Gaming

Programming

Font family not working on html,css