@font-face only works in Chrome! Help!

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

#1

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.


#2

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


#3

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.


#4

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


#5

I guess you need quotes mate.