Menu
So I have a HTML page, linked to a CSS file which is supposed to change the font of a div class called header, to a custom font named KeepCalm. Here's the code for defining the font-face:
@font-face {
font-family: 'KeepCalm';
src: url('Files\Fonts\KeepCalm.eot?') format('eot'), url('Files\Fonts\KeepCalm.woff') format('woff'), url('Files\Fonts\KeepCalm.ttf') format('truetype');
}
Here is the code to change the font-face of the header div class:
.header {
font-family: KeepCalm;
}
However the fonts are not showing up in any browser I try, chrome, firefox or IE. I have already looked up how to fix it and have not yet found a solution.
Here is the link to the font I'm using: Here.
217
asked Sep 11 '25 08:09
It turns out that I was using the "Files\Fonts\" as the path of the font, although since it was the css file I was using, it was already in the "Files" folder so I just needed it to change to "Fonts\KeepCalm.tff". Stupid mistake but it's easy to miss.
194
answered Sep 13 '25 23:09
Supposing that your folders are like this:
|-- index.html
|--|Files
|--|Fonts
|-- KeepCalm-Medium.eot (Created by http://transfonter.org/)
|-- KeepCalm-Medium.woff (Created by http://transfonter.org/)
|-- KeepCalm-Medium.woff2 (Created by http://transfonter.org/)
|-- KeepCalm-Medium.ttf (Original File)
I created this html code:
<html>
<head>
<meta charset="utf-8">
<title>Stack Overflow Test</title>
<style type="text/css" media="screen">
@font-face {
font-family: 'KeepCalm';
src:
url('Files/Fonts/KeepCalm-Medium.eot?') format('embedded-opentype'),
url('Files/Fonts/KeepCalm-Medium.woff') format('woff'),
url('Files/Fonts/KeepCalm-Medium.woff2') format('woff2'),
url('Files/Fonts/KeepCalm-Medium.ttf') format('truetype');
}
.header {
font-family: KeepCalm;
}
</style>
</head>
<body>
<div class="header">
Keep Calm
</div>
</body>
</html>
And it works. If you have the same folders that supposed and named correct the font files it will work. And you do not need a webserver. Simple html, and works.
43
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
