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;
Related
I am using this code as below
#font-face {
font-family: 'icomoon';
src:url('/../fonts/icomoon.eot') format('embedded-opentype'),
url('/../fonts/icomoon.ttf') format('truetype'),
url('/../fonts/icomoon.woff') format('woff'),
url('/../fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
if i use this code
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.html');
src:url('icon-fonts/icomoond41d.html?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon-2.html') format('truetype'),
url('icon-fonts/icomoon-3.html') format('woff'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
error shows in hosting server and runs normal in local system
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;
}
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
I have added with #fontface an iconfont. The only problem is, that it is not visible under firefox. I have the newest version of firefox. Safari and Chrome are working perfectly fine.
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconFont.svg#iconFont') format('svg'), url('../fonts/iconFont.woff') format('woff'), url('/fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconFont.woff') format('woff'),
url('../fonts/iconFont.ttf') format('truetype'),
url('../fonts/iconFont.svg#iconFont') format('svg');
font-weight: normal;
font-style: normal;
}
For font-face kit generations you can use:
http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/index.php
Try this:
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot') format('embedded-opentype'), url('../fonts/iconFont.svg') format('svg'), url('../fonts/iconFont.woff') format('woff'), url('/fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
avoid the shorthand font format
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}