I started using icon fonts.
I got this bit working with IE8+, Chrome and Safari. However it is not working with Firefox.
#font-face {
font-family: 'tr-icon';
src:url('/fonts/myFont.eot?16p15w');
src:url('/fonts/myFont.eot?#iefix16p15w') format('embedded-opentype'),
url('/fonts/myFont.woff?16p15w') format('woff'),
url('/fonts/myFont.ttf?16p15w') format('truetype'),
url('/fonts/myFont.svg?16p15w#myFont') format('svg');
font-weight: normal;
font-style: normal;
}
.tr-icon-blah:before {
font-family: 'tr-icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
content: "\e605";
}
It is shown as being a character code in a box. I tried to access all my src with firefox and it worked.
Not sure what's going wrong here.
You may try removing the lines with .eot file type from the font-face declarations, if I remember correctly, FireFox had issues with it in the past.
Related
I created some icons using FontForge, and the icons work in all modern browsers except for Safari. What would be causing Safari to be the only browser that doesn't display the fonts?
This is the SCSS that is being used:
#font-face {
font-family: 'MyFont';
src: url('/assets/fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.my-font-icon {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
&:before {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
&.my-font-questions:before {
content: "\0001";
}
&.my-font-chevron-left:before {
content: "\0002";
}
&.my-font-close:before {
content: "\0003";
}
}
Safari requires the TrueType/ttf font version and really you should be including several different types rather than just woff2 which is the most modern type. Here's a sample list from the CSS Tricks article here, the browser finds the font it understands and renders that one:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
FontForge should provide you these other font types, but if it doesn't, you'll need to go to FontSquirrel to render them (if you have the licence and permission to do so):
https://www.fontsquirrel.com/tools/webfont-generator
Can someone help me out here,below is my code where should I insert swap to resolve webfont issue in google pagespeed insights report, as i am not able to replace display:inline-block with display:swap.
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
You need to add font-display to the #face-font declaration.
So your code would be:
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
See for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/font-display#Examples
You should also use Woff2 and woff, more than 40% lighter.
EOT is not good solution.
I wrote an article about it (in French) to fully optimize the fonts : Optimiser les fonts
I'm using an icon font which renders perfectly on firefox and safari, but very poorly on chrome. I've played with the -webkit-font-smoothing properties but no to effect.
Chrome (v56 osx):
Safari:
Firefox
Css
#font-face {
font-family: 'Glyphter';
src: url('../fonts/Glyphter.svg#Glyphter') format('svg');
src: url('../fonts/Glyphter.eot');
src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
url('../fonts/Glyphter.woff') format('woff'),
url('../fonts/Glyphter.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class*='icon-']:before{
display: inline-block;
font-family: 'Glyphter';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 120px;
}
Chrome and Safari are showing the (local) be fonts correctly, but Firefox isn't.
The code I got from Fontsquirl added ' marks in the code, which I got rid of, but it's still not working:
Original code:
#font-face {
font-family: 'frutigerboldcn';
src: url('frutiger_67_bold_condensed-webfont.eot');
src: url('frutiger_67_bold_condensed-webfont.eot?#iefix') format('embedded-opentype'),
url('frutiger_67_bold_condensed-webfont.woff') format('woff'),
url('frutiger_67_bold_condensed-webfont.ttf') format('truetype'),
url('frutiger_67_bold_condensed-webfont.svg#frutigerboldcn') format('svg');
font-weight: normal;
font-style: normal;
I changed it into:
#font-face {
font-family: frutigerboldcn;
src: url(frutiger_67_bold_condensed-webfont.eot);
src: url(frutiger_67_bold_condensed-webfont.eot?#iefix) format(embedded-opentype),
url(frutiger_67_bold_condensed-webfont.woff) format(woff),
url(frutiger_67_bold_condensed-webfont.ttf) format(truetype),
url(frutiger_67_bold_condensed-webfont.svg#frutigerboldcn) format(svg);
font-weight: normal;
font-style: normal;
Fonts are loaded in the same folder as the stylesheet.
This is part of the stylesheet regarding the navigation:
#navigation .sf-menu a {
display: inline;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #008abf;
border-radius: 2px;
padding: 0 5px;
height: 26px;
line-height: 26px;
font-weight: normal;
letter-spacing: 1px;
font-family: frutigerboldcn;
How do I fix this? Thanx in advance
Put the following in your .htaccess and all will be fine, at least on modern FF versions.
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Go here for the full discussion on Stack Overflow:
CSS #font-face not working with Firefox, but working with Chrome and IE
#font-face {
font-family: 'ArialRounded';
src: url('ArialRounded.eot');
src: local('ArialRounded'), url('fonts/ArialRounded.eot'); /* for firefox */
}
#font-face {
font-family: 'ArialRounded';
src: url('ArialRounded.woff') format('woff'),
src: local('ArialRounded'), url('fonts/ArialRounded.woff'); /* for firefox */
url('ArialRounded.svg#ArialRounded') format('svg');
src: local('ArialRounded'), url('fonts/ArialRounded.svg'); /* for firefox */
}
I'm using #font-face to define my own font:
#font-face{
font-family: HelveticaNeue;
src: url('fonts/helvlight_regular-webfont.eot');
src: local("☺");
src: url('fonts/helvlight_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helvlight_regular-webfont.woff') format('woff'),
url('fonts/helvlight_regular-webfont.ttf') format('truetype'),
url('fonts/helvlight_regular-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: HelveticaNeue;
src: url('fonts/helvlight_bold-webfont.eot');
src: local("☺");
src: url('fonts/helvlight_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helvlight_bold-webfont.woff') format('woff'),
url('fonts/helvetica_bold-webfont.ttf') format('truetype'),
url('fonts/helvlight_bold-webfont.svg#webfont') format('svg');
font-weight: bold;
font-style: normal;
}
font-face rules was generated on Font Squirrel and afterwards I added font-weight and font-style rules. I use my custom font in CSS like this:
body {
font: 16px HelveticaNeue, Verdana, sans-serif;
color: black;
}
h1 {
font-weight: bold;
font-size: 2em;
}
and it works fine in Chrome, Firefox, Opera and Safari but it doesn't work in Internet Explorer.
I tried this #font-face works in IE8 but not IE9 to no success.
I also tried to change font-face name of bold style to HelveticaNeueBold and use it like:
h1 {
font-family: HelveticaNeueBold;
font-size: 2em;
}
and it works but this is not what I want of course. Also adding !important after bold didn't help. Any suggestions what I'm doing wrong?
IE doesn't support using a different font-weight than was specified in a #font-face rule.
You can read more about this here: #font-face IE9 font-weight doesn't work