How to link to a .woff font file in html document

Asked 21/1, 2016 at 20:9 Answered 22/1, 2016 at 8:14

I have a problem with a font I installed on my computer that I want to apply to HTML5 / CSS3.

How my question differs from its possible duplicate: it explicitely asks what to put in the .html file, a question that was unaddressed in the duplicate question.

Update after problem solved:

1) The <link href=....> line must NOT be included in the .html file

2) The .woff font file must be in the same directory as the .css file.

This is my minimal working CSS:

@font-face{
    font-family: Reef;
    src: local('../Fonts/Reef/reef-webfont.woff'), url('../Fonts/Reef/reef-webfont.woff') format('woff');
}

body, h1, h2{   
    text-align:center;
    font-family: 'Reef', monospace; 
}

And this is my minimal working HTML file:

<html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
    libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript"></script>    

    <head>
        <link rel="stylesheet" type="text/css"   href="bootstrap.css" />
        <link rel="stylesheet" href="stylesGrilcheeserie.css" type="text/css"/>     
        <link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
        <title> Grilcheeserie </title>          
    </head>

    <body>

        <h1>La Grilcheeserie</h1>       

    </body>
</html>

Whatever I do, my page appears with its backup font, monospace, not Reef.

My question is: how do I correctly reference the font source in the html? As far as I can tell from searching answers, my css is supposed to be right.

I'm using Firefox on Windows 10.

Helvetian answered 21/1, 2016 at 20:9 Comment(6)

Possible duplicate of @font-face url pointing to local file – Ziska 21/1, 2016 at 20:13

You could also check this post: #3837749 – Ziska 21/1, 2016 at 20:16

What does your folder structure look like? – Fealty 21/1, 2016 at 20:25

@ Jesse Kernaghan: Upmost level: /HTML-CSS-JS Then Fonts/ and Grilcheeserie/ are on the same next level. The .html and .css are inside Grilcheeserie/. The font .eot, .woff and .otf files are inside Fonts/Reef/ where Fonts is the same folder as in the previous sentence. – Helvetian 22/1, 2016 at 19:32

@LGSon: The post you mention does not address the line to put inside the head section of the .html file. – Helvetian 22/1, 2016 at 19:36

You don't reference font file like that. "Head in Cloud" gave you an answer about that. – Ziska 22/1, 2016 at 19:49

<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'> you cannot reference a font like this.

@font-face{
font-family: Reef;
src: url('reef-webfont.woff'), url('reef-webfont.woff') format('woff');}

put your fonts in the same directory where this style file is located

Percival answered 22/1, 2016 at 8:8 Comment(2)

Hurray! It worked! What I did: 1) put .woff file in same folder as .css file 2) removed <link href= .......> line from .html file 3) copy-pasted the src: .... line from your comment instead of the src: .... I previously had. Thank you people! – Helvetian 22/1, 2016 at 19:47

Works for otf too. – Shoebill 5/7, 2019 at 5:25

From my understanding, your local source should just display the name of the font as it's installed on your machine. The url source should point to where the font file is in relation to your CSS file location:

local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')

Mok answered 22/1, 2016 at 8:14 Comment(0)

Recommended topics

Hot tags