Basically a web font I am using is displaying too bold in Firefox. I used the above code to fix it in webkit browsers. -moz-font-smoothing: antialiased; does not work. So now I am asking all of you if there is another solution I am simply overlooking.
Note: Regardless of being an h1 or not the font still displays too bold.
relevant code:
#font-face {
font-family: 'GelatoScript';
src: url('../fonts/gelatoscript/gelatoscript.eot');
src: url('../fonts/gelatoscript/gelatoscript.eot?#iefix') format('embedded-opentype'),
url('../fonts/gelatoscript/gelatoscript.woff') format('woff'),
url('../fonts/gelatoscript/gelatoscript.ttf') format('truetype'),
url('../fonts/gelatoscript/gelatoscript.svg#GelatoScript') format('svg');
font-weight: normal;
font-style: normal;
}
h1.pale {
color: #f6ff96;
font-family: 'GelatoScript';
font-weight: 100;
font-size: 3.5em;
margin-bottom: 0;
text-shadow: .042em .042em 0px #787878;
}
<h1 class="pale" >Check this out!</h1>
The article Dennis Traub links to in the (previously) accepted answer is in regards to anti-aliasing for WebGL and has nothing to do with font smoothing. The simple answer to the question is: No.
Update: Firefox now supports -moz-osx-font-smoothing: grayscale; which works in basically the same way as -webkit-font-smoothing: antialiased;.
According to this article, Firefox 10 will be the first version that implements anti-aliasing.
Related
I am trying to use Google Material Icons in an electron app and ran across an issue in rendering the icons. The icons render perfectly on Windows but not on OSX. Using devtools I have seen that both request the font as 'woff2' format successfully but only Windows appears to render the icon...OSX simply list the ligature text.
Windows (left), OSX (right)
These works in Windows build but not OSX...it simply lists home or
<i class="material-icons">home</i>
<i class="material-icons"></i>
I have also tried
<i class="material-icons" id="test"></i>
#test:after{ content: 'home' }
Not sure if this an issue with chromium build for OSX, a OS font issue, or what? If anyone could provide any guidance on some things to try I would really appreciate the help.
Here is the CSS being used
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./fonts/Material-Design-Iconic-Font.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(./fonts/Material-Design-Iconic-Font.woff2) format('woff2'),
url(./fonts/Material-Design-Iconic-Font.woff) format('woff'),
url(./fonts/Material-Design-Iconic-Font.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
So, I am not 100% sure on what the issue is but wanted to post an update if it could help anyone else.
On my Windows build I had a font installed MaterialIcons-Regular.ttf...once I copied it and then uninstalled it, the Windows app stopped rendering correctly.
I then copied the MaterialIcons-Regular.ttf to the fonts folder in my electron project and then updated my css to look like
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}
Now it seems to be working...Not sure if there was something wrong with the other font sets or if I have some css setup incorrectly.
Using the Liberation font on a website works fine for standard text. However I also want to use that font as my text linked font but using the following code it does not call/use the font.
a:link {
color: #69f;
font-family: liberation_sansbold;
font-size: 18px;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-transform: uppercase;
text-decoration: none
}
This is the embedded font on my website (and as I said it works fine for regualr (non-linked) text).
#font-face {
font-family: 'liberation_sansbold';
src: url('website.com/liberationsans-bold-webfont.eot');
src: url('website.com/liberationsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('website.com/liberationsans-bold-webfont.woff2') format('woff2'),
url('website.com/liberationsans-bold-webfont.woff') format('woff'),
url('website.com/liberationsans-bold-webfont.ttf') format('truetype'),
url('website.com/liberationsans-bold-webfont.svg#liberation_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
Any suggestions?
Have a look at this answer -- most browsers appear to limit what styles you can apply to some pseudo classes. The answer I linked to applies to :visited, but I wouldn't be surprised if similar limitations applied to :link. Try just styling a, not a:link -- I'm guessing you probably want your font to be used for all types of links anyway.
I'm using #font-face to load the web fonts which is loading correctly:
#font-face {
font-family: 'HelveticaNeueLight';
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot');
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot') format('embedded-opentype'),
url('fonts/HelveticaNeueLight/helveticaneuelight.woff') format('woff'),
url('fonts/HelveticaNeueLight/helveticaneuelight.ttf') format('truetype'),
url('fonts/HelveticaNeueLight/helveticaneuelight.svg#HelveticaNeueLight') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
I also have another class to style and bold the text:
.BusinessLeftHeader{
font-family: HelveticaNeueLight;
font-size: 32px;
padding: 30px 0 5px;
text-align: center;
line-height: 1;
font-variant: normal;
}
Now, the problem is that font is not looking bold on iPad 2. It looks like text is showing with blurry effect or something like this.
I also have use this code to fix this problem.
-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
But again, still getting same problem. Text is not looking good on iPad 2. When I zoom in, it looks fine.
There are a few considerations here, firstly you have conflicting style settings:
-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
They should all be set to either antialiased or none.
You also state you wish to have a bold font, however you have not set the font-weight style and are using a font called HelveticaNeueLight which I imagine by its very name, is not bold nor include a bold version. At the least you will need to set:
font-weight:bold
Additionally, the issue is likely that the custom font you are using is not packaged with a bold version. In such instances a browser will typically 'interpret' how it should render a bold version using the available typeface, producing unexpected results. You may want to either include a bold version of the font or reference a specific weight if one is included.
I am using this code
#font-face {
font-family:myHelveticaUltraLight;
src: local("Helvetica Neue UltraLight"),
local("myHelveticaUltraLight"),
url('../fonts/HelveticaNeueUltraLight.ttf'),
url('../fonts/HelveticaNeueUltraLight.eot') format("opentype"); /* IE */
}
to provide Helvetica Neue Ultra Light to users of my website. It works ok with Safari on my Mac, but when I tested it in Chrome or Firefox on Windows it doesn't show that font (it's very thick). Any idea what could be the problem and how to fix it please? Thanks.
Contact the copyright holder for information on using Helvetica Neue on web pages.
I've used helvetica neue light using following example
#font-face {
font-family: 'helveticaneuelight';
src: url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.eot');
src: url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.woff') format('woff'),
url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.ttf') format('truetype'),
url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.svg#helveticaneuelight') format('svg');
font-weight: normal;
font-style: normal;
}
You have no SVG format... That is webkits first choice in font format.
Here is my EMERGENCY "don't know what's up with this font in webkit" kit. These are the issues that sometimes plague webkit on Windows fonts.
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
font-smooth: always;
-webkit-font-smoothing: subpixel-antialiased;
// or -webkit-font-smoothing: antialiased;
// or adding a textshadow helps also sometimes:
text-shadow: 0 0 1px rgba(0,0,0,0.3);
Also adding a faux bold looks terrible most often. The font must be a bold font in webkit for some font types.
There doesn't appear to be any difference between 'font-weight: normal' and 'font-weight: bold' in Google Chrome (and probably Safari). Has anyone found a way to invoke the 'font-weight: thinner' in Chrome the way that Firefox does?
This appears to be a known issue in Chrome fixed in latest development builds:
There is a temporary workaround you can also try:
To enable the font-weight property on a #font-face font which doesn't have a bold font defined, you need to explicitly define font-weight:normal; and font-style:normal; in the #font-face definition. Example:
#font-face {
font-family: 'GriffosFont Regular';
font-weight: normal;
font-style: normal;
src: url('fonts/GriffosFont.eot');
src: local('GriffosFont Regular'), local('GriffosFont'), url('fonts/GriffosFont.woff') format('woff'), url('fonts/GriffosFont.\
ttf') format('truetype'), url('fonts/GriffosFont.svg#GriffosFont') format('svg');
}
Maybe you need to add this to your CSS:
* {-webkit-font-smoothing: antialiased;}
font-weight: lighter; was not working for me so I used font-weight: normal; instead, which worked for my purpose. not sure what's going on with chrome right now...