I downloaded a font and generated font-face css using font-squirrel.
The font is displayed properly in IE,Opera but in chrome , firefox & safari it looks small and something totally different...
Is there anything that i need to change ??
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-regular-webfont.woff') format('woff'),
url(myfonts/lekton-regular-webfont.ttf) format('truetype'),
url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Related
I integrated a font into my web project. Here comes the CSS code:
#font-face {
font-family: 'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
font-style: normal;
}
My problem is that the font is not displayed in Firefox - instead, Times New Roman is displayed. In all other browsers the font is displayed correctly.
Does anyone see what's missing in my code?
Try the code below:
#font-face {
font-family: 'vladimirscriptefregular';
-moz-font-family:'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
-moz-font-weight:normal
font-style: normal;
-moz-font-style:normal
}
Firefox has a list of fonts which can be used in its whitelist.
It can be accessed by typing "about:config" in the address bar.
Then search for "font.system.whitelist".
Here add your font name which must be present in the Font folder.
For windows the default location is "C:\Windows\Fonts"
Code:
#font-face {
font-family: 'yanone_kaffeesatzregular';
src: url('../fonts/yanonekaffeesatz-regular-webfont.eot');
src: url('../fonts/yanonekaffeesatz-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'),
url('../fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'),
url('../fonts/yanonekaffeesatz-regular-webfont.svg#yanone_kaffeesatzregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have the eot#iefix and yet, font is not being displayed the way it should. It works fine in all other browsers. The font is applied on headings and the top right navigation.
Project link
The fonts are placed in the ftp correctly as well:
I'm working on some front-end project and i got an issue with font-face. The font is ok with Firefox but with Chrome it looks ugly, like a Time News Roman..
Here is the code is used to import the font to my Sass project:
#font-face {
font-family: 'aHeadline';
src: local(' Headline'),
url('../fonts/headline.woff') format('woff'),
url('../fonts/headline.ttf') format('truetype'),
url('../fonts/headline.svg') format('svg');
src: url('../fonts/headline.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Here is a live demo http://185.13.36.42/T/foo.html
NB: The fonts comes from the Font Squirrel webfont generator
Just a little syntax change. This will work for you:
#font-face {
font-family: 'headline';
src: url('../fonts/headline.eot');
src: url('../fonts/headline.eot?#iefix') format('embedded-opentype'),
url('../fonts/headline.woff') format('woff'),
url('../fonts/headline.ttf') format('truetype'),
url('../fonts/headline.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
I am trying to use a custom font for my website, but it appears wrong in Chrome (latest) and Opera browsers although it appears correctly (smooth) on other browsers. I tried couple of different fonts, with same results on Chrome/Opera.
My code:
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'), url('../fonts/Eurostile.woff') format('woff'), url('../fonts/Eurostile.ttf') format('truetype'), url('../fonts/Eurostile.svg') format('svg');
font-weight: normal;
font-style: normal;
}
The issue:
Thats just how the browser and OS renders the font..but try to call the .svg format before the .woff format it might fix this.
#font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'),
url('../fonts/Eurostile.svg') format('svg'),
url('../fonts/Eurostile.woff') format('woff'),
url('../fonts/Eurostile.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'll refer you to this question:
https://stackoverflow.com/a/4060778/1121870
Or try font-smooth:
http://www.w3.org/TR/WD-font/#font-smooth-prop
And there's a nasty little hack here:
http://www.elfboy.com/blog/text-shadow_anti-aliasing/
I use google "Comfortaa" font for a blog with this code
<link href='http://fonts.googleapis.com/css?family=Comfortaa&subset=greek,latin' rel='stylesheet' type='text/css'>
However, the font (along with other fonts) are displayed more boldly on mac Firefox (display fine on Chrome mac/win firefox win etc)
I changed all em to px just to be sure, plus I though I could try font squirrel with the code
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 2, 2012 */
#font-face {
font-family: 'comfortaabold';
src: url('comfortaa-bold-webfont.eot');
src: url('comfortaa-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-bold-webfont.woff') format('woff'),
url('comfortaa-bold-webfont.ttf') format('truetype'),
url('comfortaa-bold-webfont.svg#comfortaabold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'comfortaalight';
src: url('comfortaa-light-webfont.eot');
src: url('comfortaa-light-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-light-webfont.woff') format('woff'),
url('comfortaa-light-webfont.ttf') format('truetype'),
url('comfortaa-light-webfont.svg#comfortaalight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'comfortaaregular';
src: url('comfortaa-regular-webfont.eot');
src: url('comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-regular-webfont.woff') format('woff'),
url('comfortaa-regular-webfont.ttf') format('truetype'),
url('comfortaa-regular-webfont.svg#comfortaaregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still the issue persists.(I 'm not really sure where to put the #font face -I applied it through blogger css)
Am I doing something wrong, or is this plainly a browser rendering issue that can't be fixed?
Try using a numerical font-weight value. In the Google webfont listening you can see the correct font-weight for each style. In the case of Comfortaa these are: {font-weight: 300;} for book, {font-weight: 400;} for normal and {font-weight: 700;} for bold.