CODEWITHSUNDEEP
html.htaccesscssfont-faceaccess-control
Ilja
Ilja

Reputation: 46479

icon font not working in firefox

I'm trying to use icon font, so far it works good in all browsers besides firefox, I don't understand why, instead of icon it just shows value that is in data-icon attribute Can anyone explain why it is not working in firefox (latest)?

@font-face {
  font-family: 'icon-font';
  src: url('//bit.ly/ZxomPz') format('woff'),
       url('//bit.ly/WPGMJF') format('truetype'),
       url('//bit.ly/16eqBwn') format('eot'),
       url('//bit.ly/16eqLDZ') format('svg');
}

[data-icon]::before {
font-family: 'icon-font';
font-weight: 400 !important;
content: attr(data-icon);
text-transform: none;
margin-right: 3px;
position: relative;
top: 8px;
right: 5px;
font-size: 31px;
line-height: 0;
}



<span data-icon="1" aria-hidden="true"></span>

Upvotes: 0

Views: 2291

Answers (2)

Ricardo Zea
Ricardo Zea

Reputation: 10283

I know I'm late to the party, but here's a solution that worked for me and I don't see it in the answers (except the short mention by @Milky ways patterns).

Create an .htaccess file with the following information and save it in the same folder your fonts are located:

<FilesMatch ".(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

More information here:

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20452

Here is a @font-face declaration has recommended. Maybe you can try re-writing yours with this example.

@font-face {
    font-family: 'Lobster13Regular';
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot');
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.woff') format('woff'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.ttf') format('truetype'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
}

Also, make your your server is delivering the correct 'Mime-type' (ttf|otf|eot|woff) and permits accessibility for outside ressources (Access-Control-Allow-Origin "*")

Upvotes: 1

Related Questions