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
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';}
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 have a displaying problem with the font on Safari. The font looks slitly thicker on some pages than others. I load only normal font-weight in the whole website (no bold), using #font-face.
Firefox and Chrome seem to display the font the same thickness on every pages.
Here is my code:
#font-face {
font-family: 'Stanley';
src: url('Stanley-RegularItalic.eot');
src: url('Stanley-RegularItalic.eot?#iefix') format('embedded-opentype'),
url('Stanley-RegularItalic.woff2') format('woff2'),
url('Stanley-RegularItalic.woff') format('woff'),
url('Stanley-RegularItalic.ttf') format('truetype'),
url('Stanley-RegularItalic.svg#Stanley-RegularItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Stanley';
src: url('Stanley-Regular.eot');
src: url('Stanley-Regular.eot?#iefix') format('embedded-opentype'),
url('Stanley-Regular.woff2') format('woff2'),
url('Stanley-Regular.woff') format('woff'),
url('Stanley-Regular.ttf') format('truetype'),
url('Stanley-Regular.svg#Stanley-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
See screenshot of two different pages:
Give a try, add this to your font-face
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
i have to add a regional language content on the site but the output shows as
²æà PÀApÃgÀªÀ ¸ÀÄÖrAiÉÆà ¤AiÀÄ«ÄvÀ,
where as i have imported the font in the css like this
#font-face {font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}
* {
font-family: "akshar", Arial, Helvetica, sans-serif;
font-weight:400;
}
please help???
You have the Declaration syntax error in your CSS. Update your CSS like below.
#font-face {
font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}
HTML
<select multiple="multiple">
<option>Option-1</option>
<option>Option-2</option>
<option>Option-3</option>
<option>Option-4</option>
<option>Option-5</option>
</select>
CSS
#font-face {
font-family: 'OpenSansRegular';
src: url('OpenSans-Regular-webfont.eot');
src: url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg'),
url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Regular-webfont.woff') format('woff'),
url('OpenSans-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
select {
width: 150px;
height: 150px;
padding: 10px;
font-size: 18px;
margin: 20px;
font-family: 'OpenSansRegular',Arial,sans-serif;
font-weight: normal;
}
I use OpenSans font as font-face with using fontsquirrel webfontkit tool. Everything seems normal for ff,ie,safari but when open page in chrome or opera, it seems as below image;
My code as above. Why fonts seems to be corrupted for chrome and opera?
Could you try to change the order of loaded source files?
Like putting the svg at the bottom of the list.
Maybe he's trying to render the svg inside of the select boxes and messing up there.
#font-face {
font-family: 'OpenSansRegular';
src: url('OpenSans-Regular-webfont.eot');
src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Regular-webfont.woff') format('woff'),
url('OpenSans-Regular-webfont.ttf') format('truetype'),
url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}