CODEWITHSUNDEEP
cssfont-face
dark_nemesis
dark_nemesis

Reputation: 57

Cant get my custom font to display

I'm back, and doing yet another school project. I'm trying to get my site to use some custom font that I found online. This is my JSFiddle link to my code, and my HTML code is as follows:

<!doctype html>
<html>
  <head>
    <title>
      | Bat-tection |
    </title>
    <meta charset="utf-8">
    <link href="Styles/index.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h1 id="title">
          Bat-Tection
        </h1>
        <h6 id="ctrtitle">
          The only home protection service you will ever need!
        </h6>
        <nav>
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact</a></li>
          </ul>
        </nav>
      </header>
      <aside>
        <p>The Sidebar Content</p>
        <p>The Sidebar Content</p>
        <p>The Sidebar Content</p>
        <p>The Sidebar Content</p>
        <p>The Sidebar Content</p>
        <p>The Sidebar Content</p>
        <p>The Sidebar Content</p>
      </aside>
      <section class="text">
        <article>
          <h2>Article One Heading</h2>
          <p>
            Article One Content<img src="../Tuts/Images/pic07.jpg" alt="A Generic Image Caption Here" class="rgt">
          </p>
          <p>
            Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor. Curabitur posuere vulputate egestas. Vestibulum a leo id sapien commodo aliquam commodo quis dui. Phasellus at leo id elit dignissim egestas a eu elit. Quisque bibendum tellus at placerat luctus. Nulla blandit erat ipsum, eu molestie purus sollicitudin sit amet. Sed vehicula tortor quis libero finibus fringilla. Nam nibh mauris, lacinia a suscipit et, fringilla non lorem. Vestibulum tempor vel ligula ut interdum. Donec convallis porttitor est sit amet porttitor. Sed ullamcorper mauris nibh, id fermentum velit iaculis quis. Etiam rutrum blandit hendrerit. Proin a laoreet purus.
          </p>
          <p>
            Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
          </p>
        </article>
        <p class="spec"></p>
        <article class="cols">
          <h2 class="cols-span">Lorem ipsum dolor sit</h2>
          <p class="lead cols-span">
            Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor.
          </p>
          <p>
            Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
          </p>
        </article>
      </section>
      <aside class="ads">
        <p>
          Advertisment can run the size out to the margin of the previous container element, no more!
        </p>
        <p>
          Advertisment
        </p>
        <p>
          Advertisment
        </p>
        <p>
          Advertisment
        </p>
        <p>
          Advertisment
        </p>
        <p>
          Advertisment
        </p>
      </aside>
      <footer>
        <p>
          Copyright &copy; 2016 All Right Reserved
        </p>
      </footer>
    </div>
  </body>
</html>

My CSS code is as follows:

@charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
@font-face { 
font-family: battext;
src: url(../Fonts/batmfa.eot), /* IE9 Compat Modes */
src: url(../Fonts/batmfa.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
     url(../Fonts/batmfa.woff2) format(woff2), /* Super Modern Browsers     */
     url(../Fonts/batmfa.woff) format(woff), /* Pretty Modern Browsers */
     url(../Fonts/batmfa.ttf)  format(truetype), /* Safari, Android, iOS     */
     url(../Fonts/batmfa.svg#svgFontName) format(svg); /* Legacy iOS */
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: left;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 20px;
}
article p{
text-indent: 2em;
padding-left: 1.5em;
}
body{
font-family: "battext";
color: #FFFD5D;
background-color: #252122;
font: 100% Verdana;
}
#ctrtitle{
text-align: center;
}
.cols{
/*-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-colum-gap: 10px;
column-gap: 10px;*/
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.cols-span{
-webkit-coloumn-span: all;
-moz-column-span: all;
column-span: all;
font-size: 1.2em;
margin-bottom: 0.2em;
line-height: 1.2em;
}
.cols p{
margin-bottom:1.1em;
text-align: justify;
}
footer{
clear: both;
background-color: #29292C;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
header{
background-color: #29292C;
padding-bottom: 1em;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0 0 1em 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav ul{
text-align: center;
margin: 1em;
list-style: none;
}
nav ul li{
display: inline-block;
margin: 0 0.35em;

nav ul li a{
background-image: url(../Images/bat-button1.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
color: #e1e2dd;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
outline: 0;
}
nav ul li a:hover{
background-image: url(../Images/bat-button2.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
nav ul li ul{
display: none;
}
p{
margin-bottom: 1.2em;
}
.rgt{
float: right;
max-width: 30%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.spec{
margin: -5px 0 10px 0;
border-bottom: 1px dashed #000000;
line-height: 0;
}
.text{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#title{
color: #FFFD5D;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}

Can you guys off me any help?

Thanks, -dark_nemesis

Upvotes: 0

Views: 62

Answers (3)

reddtoric
reddtoric

Reputation: 686

take the quotations off the css

font-family: "battext"

side note, check to make sure you have right to use it in whatever you're doing

also check to make sure the file path is correct.

If your structure is like this: (upper case = folders)

  • HTML
    • index.html
  • CSS
    • styles.css
  • FONT
    • myfont.ttf

then.. these should be your code

html: <link type="text/css" rel="stylesheet" href="../css/styles.css" />

take off "../" if index.html is same level as CSS/FONT folder

css:   @font-face {  font-family: myfont;  src: url(../font/myfont.ttf); }

the src for css will start where in the folder it's in, so styles.css has to go back a directory, then go to font and your file

Upvotes: 0

Captain Anonymous
Captain Anonymous

Reputation: 142

You're just missing a line of code (I think) it is
font-family: battext, sans-serif;
If you insert that under the body element as well as the font-face. Then I think it will work. Hope this helps...

Upvotes: 0

Ahmed Abdeldaim
Ahmed Abdeldaim

Reputation: 131

what i understand from your question is that you want to know how to use fonts, isn't it?

you can always visit https://www.google.com/fonts and under every font there is a button about how to use this font.

Upvotes: 1

Related Questions