CSS @font-face not working with Firefox, but working with Chrome and IE
LOCALLY RUNNING THE SITE (file:///
)
Firefox comes with a very strict "file uri origin" (file:///
) policy by default: to have it to behave just as other browsers, go to about:config
, filter by fileuri
and toggle the following preference:
security.fileuri.strict_origin_policy
Set it to false and you should be able to load local font resources across different path levels.
PUBLISHED SITE
As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.
A nice recap is available here
Select element with font family Verdana and font size misaligns the option selected
I just moved your inline stlye to a style sheet:
select {font: 12px verdana;}
and it seems to work for me.
@font-face is dropping letters in Firefox
You can tell Firefox to skip looking for ligatures and treat them as regular characters by adding-moz-font-feature-settings: "liga=0"
in your font-face declaration.
Font Awesome unicode icon is not working in firefox
I have a workaround, a solution and some reasoning why this is happening...
Workaround: just use any `fa-style on your page.
Example:
https://jsfiddle.net/mbaas/zLapqy3u/
Solution: declare font-face
Add the font-face
-declaration from FA's CSS:
@font-face
{
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}
Note that you this code refers to some font-files which you will need to provide as well.
Actually...it would recommend to not call this font FontAwesome
, because that could overlap with FA and cause unintended side-effects. Better use a unique name. To be clear:
@font-face
{
font-family: 'FontAwesome_Dilip';
font-style: normal;
font-weight: normal;
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}
and
select {
FontAwesome_Dilip
font-family: '', 'open sans'
}
Also I want to suggest using a specific style for this font-family in preference to applying it to all select
-controls.
Possible explanation
It might be some sort of optimization where FF does not bother processing the @font-face-declation
from FA-CSS, because it is not used (none of the actual styles from the CSS is referenced.). So then my simple <i class="fa fa-check"></i>
fixed it...
Bonus: another advantage of the "private" font-face
As long as you only use yes
or no
in the select, everything is fine. Try adding the word Key
to your options just to see what's possible (this is an effect which wasn't generally reproducible, but using Chrome I had this very problem. But I'm also using FontAwesome-Font in my Windows-System and I suspect this caused the effect.): you may end up seeing the smybol twice, because "key" is used as a ligature in the font-definition to generate the same symbol. So the advantage of declaring a font-face specifically for that usage is that you can add font-variant-ligatures: none;
to the CSS-Style for select
to disable ligatures.
Related Topics
How to Toggle Two CSS ':Checked' Pseudo-Classes with One Click
Internet Explorer 11 and Supported Web Fonts
Macos Chrome Horizontal Scrollbar Not Disappearing
Css/Js Bundle in Single File in MVC When Publish with Release Option
Safari Rounding Down on Subpixel Calculations
Using an Data Uri Svg as a CSS Background Image
How to Scroll with Ionic and Have Fixed Content Above
Web Design for Smart Phone - Pixel Size
Css: How to Vertically and Horizontally Align an Image
How to Use CSS Attribute Selector for an Svg Element with Namespaced Attribute Href
Resize Unknown Number of Elements to Fill Width of Parent Container
Hide Overflow on Elements with Fixed Position