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;
}
Related
I used Glyphter to create an icon from a custom SVG file. I am trying to use it now, hopefully something like this:
<i class='myIcon'></i>
But just adding it as a font-family to a class did not work. I can't seem to figure out how to use it. I have the generated CSS file:
#font-face {
font-family: 'Glyphter';
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'),
url('../fonts/Glyphter.svg#Glyphter') format('svg');
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
}
.icon-clear-filter:before{content:'\0048';}
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 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.
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