@font-face only works in Chrome! Help!

@font-face only works in Chrome! Help!
0.0 0


I was recently trying to get a font working. It’s an icon font, and I have it in the same directory as my HTML file (and everything else).

@font-face {
        font-family: weatherIcons;
        src: url(/webfont.ttf);
        font-weight: regular;

Is there something simple I’m missing? It only works in Chrome on my computer, not in Safari or Chrome on another computer.


I’m not sure what weather icons you are using, but I’m going to guess and say http://erikflowers.github.io/weather-icons/?

Correct me if I am wrong as I am still relatively new to this, but wouldn’t you link the css and use the span tag like below?

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
<span class="wi wi-day-sunny"></span>

Here is an example I came up with if needed: http://codepen.io/JLndr/pen/xgJXJa


Yes, I am using that icon set. The thing is that I already coded a function to convert the Yahoo! Weather API (SimpleWeatherJs.com) condition code ino a character, and I don’t want to rewrite a function for 48 of those codes.


Possibly you don’t need the / in front of webfont.tff, or you need to enclose webfont.tff in quotes.


I guess you need quotes mate.