Menu
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.
620
<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
101
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')
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
