Iam doing a website in ubuntu and finished with UI part. Everything was working smoothly in ubuntu but when i switched on to windows all the fonts are distorted. I tried the following code
#font-face {
font-family: 'garrisonsb';
src: url('../fonts/garrisons-bold.eot');
src: url('../fonts/garrisons-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/garrisons-bold.woff') format('woff'),
url('../fonts/garrisons-bold.ttf') format('truetype'),
url('../fonts/garrisons-bold.svg#garrison_sansbold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'garrisons';
src: url('../fonts/garrisons-regular.eot');
src: url('../fonts/garrisons-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/garrisons-regular.woff') format('woff'),
url('../fonts/garrisons-regular.ttf') format('truetype'),
url('../fonts/garrisons-regular.svg#garrison_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'rupee';
src: url('../fonts/Rupee.eot');
src: url('../fonts/Rupee.eot?#iefix') format('embedded-opentype'),
url('../fonts/Rupee.woff') format('woff'),
url('../fonts/Rupee.ttf') format('truetype'),
url('../fonts/Rupee.svg#rupeeregular') format('svg');
font-weight: normal;
font-style: normal;
}
the specified code is been generated using squirrel-generator. I tried with font-smooth property set to 'always' and also with -webkit-font-smoothing set to antialiased and the font-weight was also specified as 700 for regular and 900 for bold instead of 'normal', but nothing worked.
please suggest optimum solution......
Web fonts are not smooth in all the browsers. You may have to use -webkit-font-smoothing: antialiased for web-kit browsers.
You better use text-shadow: 0px 0px 1px #GOOD-COLOR-HERE or text-shadow: 0px 0px 1px rgba(COLOR-SETTINGS-HERE) and tweak the color settings and shadow for the best result.
When saying the problem stays within all the browsers it pops the question, is something wrong with your font or maybe something else?
Can you try to do that with another custom font in Windows to see the result?
Though the solution #Madhu Rox provided is pretty cutting edge.
Related
I was trying to use Helvetica font for my next project, but It was rendering heavy on Google Chrome but it was working fine on other browser.
/*...Helvetica.*/
#font-face {
font-family: 'helvetica';
src: url('helvetica/Helvetica.eot');
src: local('?'), url('helvetica/Helvetica.woff') format('woff'), url('helvetica/Helvetica.ttf') format('truetype'), url('helvetica/Helvetica.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Did anyone faced the same problem?
Try using the following code on html/body tag
-webkit-font-smoothing: antialiased !important
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"
My custom fonts aren't rendering in ie8.
I've allready tried clearing the cache, and I'm also sending the correct filetypes if I'm not mistaken.
What am I missing here?
#font-face {
font-family: 'Lobster';
src: url('fonts/lobster.eot');
src: url('fonts/lobster.eot') format('embedded-opentype'),
url('fonts/lobster.woff') format('woff'),
url('fonts/lobster.ttf') format('truetype'),
url('fonts/lobster.svg#Lobster1.4Regular') format('svg');
}
.logoHome{color:#FFF; font: 58px Lobster, serif; text-decoration:none; line-height:58px;}
the problem it is easy solve, just make the url path to be relative:
#font-face {
font-family: 'Lobster';
src: url('http://www.sample.com/fonts/lobster.eot');
src: url('http://www.sample.com/fonts/lobster.eot?#iefix') format('embedded-opentype'),
url('http://www.sample.com/fonts/lobster.woff') format('woff'),
url('http://www.sample.com/fonts/lobster.ttf') format('truetype'),
url('http://www.sample.com/fonts/lobster.svg#Lobster13Regular') format('svg');
font-weight: normal;
font-style: normal;
}
but this will only work down to IE8 you can use this caniuse.com to always check which thing you can use in older browsers
The first line gave an error.
Removing:
src: url('fonts/lobster.eot');
Did the trick.
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 am hoping someone can please point out what's not working about this font-face implementation. I've testing this using the body tag so there's no question as to whether the issue is with the HTML (yes, I do have a body tag.)
I have obtained the fonts and the implementation CSS from FontSquirrel. Thanks for looking at this!
CSS:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('DymaxionScript-webfont.eot');
src: url('DymaxionScript-webfont.eot?#iefix') format('embedded-opentype'),
url('DymaxionScript-webfont.woff') format('woff'),
url('DymaxionScript-webfont.ttf') format('truetype'),
url('DymaxionScript-webfont.svg#DymaxionScriptRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}
File tree structure:
Screenshot of Courier fallback font:
Answer: Apparently if one leaves "Regular" off of the font-family declaration, everything works fine. Answered my own question by playing with it.
Real Answer: My first "answer" only worked in Safari. What worked in all of them was changing "'DymaxionScript-webfont..." to '../DymaxionScript-webfont... After I did that, everything worked. It was bad pathing.
Here is a more concise #font-face implementation, that I know works across the board:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('/path/to/font/webfont.eot?') format('eot'),
url('/path/to/font/webfont.woff') format('woff'),
url('/path/to/font/webfont.ttf') format('truetype'),
url('/path/to/font/webfont.svg#webfont') format('svg');
font-weight:normal;
font-style:normal;
}
For various web fonts you can check out google.com/webfonts which has a bunch of different fonts for use, but you just add a link to google's site and it will return the proper formatting for most browsers as far back as ie6
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}