CODEWITHSUNDEEP
htmlcssfont-face
Richard Paul Astley
Richard Paul Astley

Reputation: 323

CSS @font-face not working?

In my HTML:

<!DOCTYPE html>


<head>

    <link type="text/css" rel="stylesheet" href="add_ons/style_sheets/style.css" />

</head>

<body>

    <div id="header">
        <p id ="text" >BALL</p>
    </div>

<body>

In the css I've tried:

@font-face {
font-family: 'Pier';
src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
src: url('add_ons/sources/fonts/Pier.woff') format('woff');
src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
}

#text{

    font-family: 'Pier';

}

And it did not work, I've also tried to remove the format('truetype') part and to use src: url('Path'), url('Path'), url('Path') but that has not worked either.

Can somebody explain me how to properly insert my custom font into a webpage?

P.S.: My webpage isn't currently on any server I'm just opening the html file from my computer on chrome 47.0, could that be the cause?

Upvotes: 1

Views: 18233

Answers (2)

Teknotica
Teknotica

Reputation: 1136

Best practices is to always use a relative paths not absolute ones, to ensure it works for any domain.

From your code, I'm assuming you are having the following structure:

  • Root
    • index.html
    • add_ons
      • style_sheets
        • style.css
      • sources
        • fonts
          • Pier.woff2
          • Pier.woff
          • Pier.ttf

You could simply update your paths in the CSS from:

@font-face {
   font-family: 'Pier';
   src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
   src: url('add_ons/sources/fonts/Pier.woff') format('woff');
   src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
}

To:

@font-face {
   font-family: 'Pier';
   src: url('../sources/fonts/Pier.woff2') format('woff2');
   src: url('../sources/fonts/Pier.woff') format('woff');
   src: url('../sources/fonts/Pier.ttf') format('truetype');
 }

Upvotes: 5

Richard Paul Astley
Richard Paul Astley

Reputation: 323

I found out the answer!

When you say url() css expects a full url and not a relative one.

So:I was using a Path relative to my index.html instead of a full complete path so src: url('website/add_ons/sources/fonts/regular/Pier.woff2');

You should use src: url('C:/Users/Admin/Desktop/website/add_ons/sources/fonts/regular/Pier.woff2');

If you were using a website you should use the full path too iehttp://www.web.com/fonts/font.ttf

Upvotes: -1

Related Questions