HTML @font-face not linking

Kizam · Aug 27, 2014

Hey. I have a small webpage project to do and want to use a custom font. I have the font file saved in a fonts folder that's stored in the same location as my html project but the text (h1.top) wont change. Please help me find the right way so I can move on.



<html>

<head>
<title>IT Support</title>
<style>
@font-face {
font-family: AlphaRuler;
src: url(Fonts\AlphaRuler.otf);
}
h1.top {
font-family: AlphaRuler;
}
</style>
</head>

<body>
<h1 class="top">IT Support</h1>
</body>

</html>

carnageX · Aug 28, 2014

You're using the wrong slash in your src: url.

Should look like:

Code:

<style>
@font-face {
font-family: AlphaRuler;
src: url(../Fonts/AlphaRuler.otf);
}
h1.top {
font-family: AlphaRuler;
}
</style>

The "../" in front of the Fonts folder means it should go to the root of the site and then the Fonts folder. You can exclude that if you like though, and just have "Fonts/AlphaRuler.otf"

Kizam · Aug 28, 2014

carnageX said:
You're using the wrong slash in your src: url.

Should look like:

Code:

<style> @font-face { font-family: AlphaRuler; src: url(../Fonts/AlphaRuler.otf); } h1.top { font-family: AlphaRuler; } </style>

The "../" in front of the Fonts folder means it should go to the root of the site and then the Fonts folder. You can exclude that if you like though, and just have "Fonts/AlphaRuler.otf"

Thanks for help. It worked once I added in ./ . Two dots took me up a folder so couldn't locate /Fonts

carnageX · Aug 28, 2014

Ah, yeah, depends on where you have the folder relative to where you are.
Glad it solved it though.

HTML @font-face not linking

Kizam

Beta member

carnageX

Private Joker,

Kizam

Beta member

carnageX

Private Joker,

Similar threads