CODEWITHSUNDEEP
htmlcssfonts
EFH
EFH

Reputation: 441

Can't make any different fonts show up on website with @font-face or google fonts

I'm new to web dev so please excuse the ignorance...

I'm trying to put a custom font on my website. I've tried doing it with @font-face and google fonts but nothing seems to work.

I've (hopefully) linked the google font in the top of the HTML doc. Also linked the fonts.css containing the 'shewalks' font. The CSS file shows how I tried to link the fonts using @font-face.

WTH am I doing wrong?

Folder Structure

css:

@font-face {
     font-family: 'shewalks';
     src: url('./fonts/she_always_walks_alone_demo-webfont.ttf');
     src: url('./fonts/she_always_walks_alone_demo-webfont.woff');
     src: url('./fonts/she_always_walks_alone_demo-webfont.svg');
     src: url('./fonts/she_always_walks_alone_demo-webfont.eot');
     src: url('./fonts/she_always_walks_alone_demo-webfont.woff2');
     }

     a {
         font-family:'pacifico',verdana,arial;
       }


     h2 {

         font-family: 'Pacifico', cursive;

        }

     body {
         text-align: center;
         font-family: 'shewalks';
         }


     header {

         position: fixed;
         background: #ffffff;
         width: 100%;
         z-index: 10;
         position: fixed;
         height: 300px;

         }

html: 

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <link href='https://fonts.googleapis.com/css?family=Pacifico'                   rel='stylesheet' type='text/css'>
         <link rel="stylesheet" type="text/css" href="fonts/fonts.css" />
         <link href="style.css" rel="stylesheet" />



         <title>Me and the Monster</title>  
     </head>

     <body>


         <div id="banner">
             <h2>Me and the Monster</h2>

         </div>

         <div id="content">
    <h2><div style="font-family: 'pacifico', serif;">This should be in 'pacifico' font.</div></h2>

         <p>Content goes here </p>

         <p>Content goes here </p>

</div>

Thanks so much for any and all help!

Upvotes: 2

Views: 712

Answers (2)

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

If you go the Google route, your code should look like:

HTML: 

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

CSS: 

body {
  font-family: 'Pacifico', cursive;
}

If you go the '@import' route, and are hosting the fonts on your own server, your code should look like:

CSS: 

@font-face {
  font-family:"She Always Walk Alone Demo";
    src:url("/fonts/She_Always_Walks_Alone_Demo.eot?") format("eot"),
        url("/fonts/She_Always_Walks_Alone_Demo.woff") format("woff"),
        url("/fonts/She_Always_Walks_Alone_Demo.ttf") format("truetype"),
        url("/fonts/She_Always_Walks_Alone_Demo.svg#SheAlwaysWalkAloneDemo") format("svg");
    font-weight:normal;
    font-style:normal; 
}

body {
  font-family: 'She Always Walk Alone Demo', cursive;
}

Upvotes: 0

Vin&#237;cius Fagundes
Vin&#237;cius Fagundes

Reputation: 2041

In your font.css :

src: url('./fonts/she_always_walks_alone_demo-webfont.ttf');

Url is not about your server path, but relative your domain from font.css. So, it should work:

src: url('fonts/she_always_walks_alone_demo-webfont.ttf');

You should also include the format on your src like below:

@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot'); /* IE9 Compat Modes */
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Also, fix in your index.html:

<link href='https://fonts.googleapis.com/css?family=Pacifico' />

Upvotes: 0

Related Questions