TechQA.

I can't get the .woff to load

362 views Asked by At

My site design is very close to finish, but I'm stuck on getting this font to install and work on my site. Do .woff files only show on the web once it connects to a server or what? I'm completely confused? I don't know what I'm doing wrong, I'm following the guide they gave me verbatim.

In my code you can see how I added the code source in my html and tried to add it to my nav.logo file.

<head>
        <title>DADD | Stream Music, Connect, &amp; Merch | DADD </title>
        <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>                    
        <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>
     </head>

Here's an example of how I'm applying the font in css

/* IMPORTS */
/*DADD HOME*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.4s;
}


body {
  background-color: white;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
}

.li {
  font-family: 'Michroma', sans-serif;
}

.container {
  margin-left: 0%;
  margin-right: 1%;
}


/* Navbar section */

.nav div.main_list ul li{
  height: 65px;
  margin: auto 2rem; /* That will define a equal space between the <li> elements */
}


.nav {
  width: 100%;
  height: 65px;
  position: fixed;
  line-height: 65px;
  background-color: rgba(0, 0, 0, 0.8);
}

div.logo {
  width: 120px;
  height: 65px;
  position: absolute;
  text-align: right;
  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");
}

div.logo a {
  text-decoration: none;
  color: #fff;
  font-size: 1.8em;
  color: white;
}

.nav div.logo a:hover {
  color: #c0c0c0;
}

div.main_list {
  width: 600px;
  height: 65px;
  float: right;
  font-size: 14px;
  font-family: Michroma;
  src: url(Michroma.ttf), url(san-serif.ttf);
  text-transform: uppercase;
}

.nav div.main_list ul {
  width: 100%;
  height: 65px;
  display: flex;
  list-style: none;
  justify-content: space-around;
}

.nav div.main_list ul li {
  height: 65px;
}

.nav div.main_list ul li a {
  text-decoration: none;
  color: #fff;
  line-height: 65px;
  text-transform: uppercase;
}

.nav div.main_list ul li a:hover {
  color: #c0c0c0;
}

.nav div.media_button {
  width: 40px;
  height: 40px;
  background-color: transparent;
  position: absolute;
  right: 15px;
  top: 12px;
  display: none;
}

.nav div.media_button button.main_media_button {
  width: 100%;
  height: 100%;
  background-color: transparent;
  outline: 0;
  border: none;
  cursor: pointer;
}

.nav div.media_button button.main_media_button span {
  width: 98%;
  height: 1px;
  display: block;
  background-color: #fff;
  margin-top: 9px;
  margin-bottom: 10px;
}

.nav div.media_button button.main_media_button:hover span:nth-of-type(1) {
  transform: rotateY(180deg);
  transition: all 0.5s;
  background-color: #c0c0c0;
}

.nav div.media_button button.main_media_button:hover span:nth-of-type(2) {
  transform: rotateY(180deg);
  transition: all 0.4s;
  background-color: #c0c0c0;
}

.nav div.media_button button.main_media_button:hover span:nth-of-type(3) {
  transform: rotateY(180deg);
  transition: all 0.3s;
  background-color: #c0c0c0;
}

.nav div.media_button button.active span:nth-of-type(1) {
  transform: rotate3d(0, 0, 1, 45deg);
  position: absolute;
  margin: 0;
}

.nav div.media_button button.active span:nth-of-type(2) {
  display: none;
}

.nav div.media_button button.active span:nth-of-type(3) {
  transform: rotate3d(0, 0, 1, -45deg);
  position: absolute;
  margin: 0;
}

.nav div.media_button button.active:hover span:nth-of-type(1) {
  transform: rotate3d(0, 0, 1, 20deg);
}

.nav div.media_button button.active:hover span:nth-of-type(3) {
  transform: rotate3d(0, 0, 1, -20deg);
}


/* Home section */

.home {
  width: 100%;
  height: 100vh;
  background-color: #ddd;
}


/* Media query section */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    margin: 0;
  }
}

@media screen and (max-width:768px) {
  .container {
    margin: 0;
  }
  .nav div.logo {
    margin-left: 15px;
  }
  .nav div.main_list {
    width: 100%;
    margin-top: 65px;
    height: 0px;
    overflow: hidden;
  }
  .nav div.show_list {
    height: 200px;
  }
  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    height: 200px;
    top: 80px;
    right: 0;
    left: 0;
  }
  .nav div.main_list ul li {
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .nav div.main_list ul li a {
    text-align: center;
    line-height: 40px;
    width: 100%;
    height: 40px;
    display: table;
  }
  .nav div.media_button {
    display: block;
  }
}
.daddcenter {
    margin: 0;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
 }

/* Footer */

footer {
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  font-size: 10px;
}
/*DADD HOME*/
/*DADD MEDIA*/

.Socail_MediaLinks{
    margin: 0;
    font-size: 50px;
    position: absolute;
    list-style-type: none;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)}

    /*
This CSS resource incorporates links to font software which is the valuable copyrighted 
property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, 
convert, modify or reverse engineer this font software. Please contact Monotype with any questions 
regarding Web Fonts: https://www.linotype.com
*/
<!DOCTYPE html>
<html>
    <head>
        <title>DADD | Stream Music, Connect, &amp; Merch | DADD </title>
        <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>                    
        <script type="text/javascript">
            var MTUserId='';
            var MTFontIds = new Array();

            MTFontIds.push("738462"); // 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>
        <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>
        </div>  
        <!--image-->
    </body>
</html>

css fonts webforms woff jshowoff
Original Q&A
1

There are 1 answers

1
ghost275 On

You need to download the 'Fonts' folder from linotype. Check here ..and remove the 'src' attribute from your div.logo

Related Questions in CSS

Related Questions in FONTS

Related Questions in WEBFORMS

Related Questions in WOFF

Related Questions in JSHOWOFF

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions