0

I am trying to use a custom font on my webpage, but it isn't working. Any idea why?

@font-face {
  font-family: 'raleway';
  src: url("Raleway-Regular.tff") format("truetype");
}

.logoarea {
  float: left;
}

.logo {
  width: 120px;
  height: 74px;
}
.topnavbar {
  font-family: 'raleway';
}

That is my css code. I have already checked to make sure the spelling of the file is correct. the css and my font are in the same directory.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <!-- TEMP - AUTO REFRESH -->
  <meta http-equiv="refresh" content="2" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <title>OJMari</title>
</head>
<body>
  <div class="logoarea">
    <img src="images/logo.png" alt="OJMari Logo" class="logo" />
  </div>
  <div class="topnavbar">
    test
  </div>
</body>
</html>

That is my html code. I don't see anything wrong with it.

I have already validated both of these, so does anyone know why this is happening? For those who are curious, this is what my html output on Google Chrome 59 looks like. HTML Output

MTMaster
  • 7
  • 3

2 Answers2

0

The issue is that different browser will need different font files format, see: https://help.webflow.com/article/list-of-font-file-types-for-maximum-browser-support

Not sure if you use sass but this should give you an idea of what I mean:

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

Patrick Nouvion
  • 34
  • 4
0

It seem the font type is incorrect format. Please change font extension to .ttf

@font-face {
  font-family: 'raleway';
  src: url("Raleway-Regular.ttf") format("truetype");
}
Xinh Nguyen
  • 16
  • Wow, thanks! I thought it might have been a dumb mistake like that... I changed it and the font is working perfectly now. – MTMaster May 13 '17 at 06:44