I got the Homestead font from the Lost Type Co-op, which has font-face support. Using Font Squirrel, I got an #font-face package. I included everything and wanted to use the Inline variant as demonstrated here. This is my CSS:
#font-face {
font-family: 'HomesteadInline';
src: url('homestead/homestead-inline-webfont.eot');
src: url('homestead/homestead-inline-webfont.eot?#iefix') format('embedded-opentype'),
url('homestead/homestead-inline-webfont.ttf') format('truetype'),
url('homestead/homestead-inline-webfont.svg#HomesteadInline') format('svg');
font-weight: normal;
font-style: normal;
}
h1 { font-family: 'HomesteadInline'; font-size: 10em}
The font works, but renders horribly in Chrome and Firefox, the only browser that I tested that does it right is IE9.
Below is a comparison screenshot:
Is there any way of fixing this?
I've had issues with the font-weight of homestead across different browsers.
Try adding font-weight:200; when you use homestead
Related
I am trying to use Helvetica Neue as the font for my website everywhere so I applied to the body like so
body {
background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/background.jpg");
font-family: "Helvetica Neue" !important;
}
but my font does not appear, it was working at one point but now its not working in Firefox, Chrome, Safari or IE
you can see what I am talking about here
http://inauguralseason.com/
any help would be appreciated,
Thanks,
J
Your #font-face seems to have the font family named as 'helvetica_neueregular' and I don't see a font set for your navigation but anywhere else if you add 'helvetica_neueregular' it loads the font. As far as browser consistency In Chrome dev tools it looks like you are missing some font browser types to provide full browser support.
http://inauguralseason.com/wp-content/themes/twentyeleven/style.css
#font-face {
font-family: 'helvetica_neueregular';
src: url('helveticaneue-medium-webfont.eot');
src: url('helveticaneue-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneue-medium-webfont.woff') format('woff'),
url('helveticaneue-medium-webfont.ttf') format('truetype'),
url('helveticaneue-medium-webfont.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT: This is loading the medium font but it called regular just change to 'helvetica_neuemedium'
You need to upload the font to your web-site and declare the font-face
#font-face
{
font-family: 'Helvetica Neue';
src: url('HelveticaNeue.ttf'),
url('HelveticaNeue.eot'); /* IE9 */
}
and only then you can use it on your web-pages.
I'm using #font-face on a website. The code works and in Firefox, Chrome, and Opera the #font-face font loads perfectly. The code used is the same that's generated by Font Squirrel. This is the #font-face code:
#font-face {
font-family: 'OpenSansRegular';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
And the font is then called using this code:
font-family: "OpenSansRegular",Arial,sans-serif;
However, in IE9 it still works but is very clunky. When the page is loaded initially, the Arial font is loaded first, and after about 1 or 2 seconds the OpenSansRegular font is then loaded. This obviously spoils the experience of the site as the page is loaded with one font then the other font is booted on to the page after a period of time.
Is there a way to prevent this from happening while still using #font-face?
In IE 9, the use of data: attribute is fully supported. In this case, you can modify the CSS this way:
#font-face {
font-family: 'OpenSansRegular';
src: url('data:font/eot;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAggg=='); /* IE 9 */
font-weight: normal;
font-style: normal;
}
This will make sure only when the CSS completely loads, it loads the fonts too. Hope it helps.
I used this code:
#font-face {
font-family: 'DroidSansRegular';
src: url('droidsans-webfont.eot');
src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-webfont.woff') format('woff'),
url('droidsans-webfont.ttf') format('truetype'),
url('droidsans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSansBold';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
and when I using font-weight: bold; then bold text in Chrome is ok, but in Firefox is too much bolder.
How to solve this?
PS: I have to use the fonts from local files.
FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.
thread here
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
The Problem here is that FF takes the font and applies the bold font-weight to it (So basically it doubles the effect). Chrome doesn't seem to change the font-weight and just uses the right font. I think this happens because you declare two different font-families. The right CSS for this case would be:
#font-face {
font-family: 'DroidSans';
src: url('droidsans-webfont.eot');
src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-webfont.woff') format('woff'),
url('droidsans-webfont.ttf') format('truetype'),
url('droidsans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSans';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
Notice that I changed the font-family to "DroidSans" not "DroidSansRegular" and "DroidSansBold".
The issue is that Firefox tries to add the bold affect to text even for custom fonts that are already bold. I've just had the exact same situation, and resolved it by setting font-weight: normal; on the #font-face declaration.
Example:
#font-face {
font-family: 'DroidSansBold';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
You'll also need to use font-weight:normal; on any element (e.g. h1, h2, etc) that would otherwise have font-weight:bold; set otherwise Firefox will still add bold to the custom font.
You have specified two faces in two different families. You have defined a regular face in a family called “DroidSansRegular” and you have defined a bold face in a family called “DroidSansBold”. The design of CSS expects you to define those as two weights of one family. If you make both say font-family: "DroidSans";, then you can use a font family called “DroidSans” and when you ask for bold, you get the bold face from that family.
(Oops. The chosen answer already gave the correct solution but didn’t quite explain what was wrong.)
My problem was that the text that was "more bold" was within a h1 tag. I just added the following to my CSS and it fixed the problem! :)
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
I used Alex's solution:
#font-face {
font-family: 'SomeFont';
src: url('fonts/somefont-webfont.eot');
src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/somefont-webfont.woff') format('woff'),
url('fonts/somefont-webfont.ttf') format('truetype'),
url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SomeFont';
src: url('fonts/somefontbold-webfont.eot');
src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/somefontbold-webfont.woff') format('woff'),
url('fonts/somefontbold-webfont.ttf') format('truetype'),
url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
font-weight: bold;
font-style: normal;
}
Which is still not worked in Firefox v24... Today, on 2013. october 28. the bold #font-face problem is still exist.
After a little search, I found this solution here:
https://support.mozilla.org/hu/questions/801491
What did work, at least until Mozilla corrects this issue in an update (2011.03.27...), was turning off Hardware Acceleration. Go to Tools->Options | Advanced | General tab | Uncheck "Use hardware acceleration when available".
I'm sure this hits performance in some way but so far it is working out fine.
Which is sad that you really can't do anything about the bold fonts in Firefox... You really not have option to turn this off on user's machines. Hardware Acceleration is really important. I guess you just need to live with it. They didn't fixed this in the last 3-4 years. Probaby they won't fix this in the future.
However, I noticed that maybe this issue not affecting the externel javascript fonts (for example: Typekit, EdgeFonts).
Hope that Chrome will find its way on more and more user's PC...
UPDATE:
It's possible only to turn off parts of the hardware acceleration. Tutorial here: http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/
Also mentioned an another solution: turn off anisotropic filtering for Firefox in your graphic card's settings page (but this is not works for me).
#-moz-document url-prefix() {
body h3{
font-weight: normal;
font-style: normal;
}
}
this worked for me!
Typically JavaScript based fonts render better, although everything is going to look different in different browsers because of the rendering engines. You'll even notice a difference between Windows & Mac with the same browser.
Typekit tends to be my favorite choice. Google fonts do pretty well also. I think DroidSans is an option at Google or Typekit.
In a nutshell, there really isn't a way to solve this due to the slight differences in rendering engines and internal settings used by each browser. (as #LainBallard alluded to).
If you really need to have pixel-perfection, your only real hope is to use images, but I would try to tweak your design so that you don't need the pixels to match exactly.
I have a webfont that looks amazing on Firefox, not so much on Chrome. I've tried playing with the text-rendering property, with less-than-spectacular results. My CSS is something like this:
#font-face {
font-family: 'TextFont';
src: url('[my font file url]') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: TextFont, Tahoma, Geneva, sans-serif;
text-rendering: auto;
}
Changing text-rendering doesn't seem to do anything in Firefox, so I'm posting a single screenshot for it.
Results:
Firefox (a.k.a. "what it should look like")
Chrome - text-rendering: auto
Chrome - text-rendering: optimizeLegibility
Chrome - text-rendering: optimizeSpeed
Chrome - text-rendering: geometricPrecision
All of the Chrome screenshots look really bad compared to the Firefox one. Is there something I'm missing in the CSS?
I'm using Windows 7, Firefox 8.0, and Chrome 15.0.
Not sure if this is what you're seeing, but Chrome has an issue with anti-aliasing and truetype fonts. As per http://www.fontspring.com/blog/smoother-web-font-rendering-chrome, you can instead specify the SVG font before the TrueType in your font-face, e.g.:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
}
The biggest downside is that Safari will download both the svg and the woff.
Try this:
-webkit-text-stroke: .5px
The .5 is kind of arbitrary - some pixel value between 0 and 1 is the key. This forces sub-pixel hinting of the font.
A demo can be seen here:
http://dabblet.com/gist/4154587
This is how I do all of mine and it's worked on IE, Firefox, Chrome
#font-face {
font-family: 'NeutraTextBold';
src: url('../fonts/neutra_text_bold-webfont.eot');
src: url('../fonts/neutra_text_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/neutra_text_bold-webfont.woff') format('woff'),
url('../fonts/neutra_text_bold-webfont.ttf') format('truetype'),
url('../fonts/neutra_text_bold-webfont.svg#NeutraTextBold') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font: 12px 'NeutraTextBold', sans-serif;
color: #FFF;
}
I get my code from fontsquirrel
There really is not anything you can do to improve this via CSS. The text rendering engines are different between Firefox and Chrome and you are seeing the results. If the font is not properly hinted and prepared for a web font you can expect results like this to be enhanced.
Where was the font acquired from?
You can try running it through FontSquirrel to see if any of the automatic hinting that Ethan offers might normalize this a bit.
Some additional information on rendering and DiretWrite which is what you are seeing as the big differentiators....http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html
Chrome has anounced in Chrome 37 they will be switching from Windows Graphics Device interface to Microsoft’s DirectWrite API, a technology that improves the way fonts look on modern screens.
The Beta is now out:
https://www.google.com/chrome/browser/beta.html
From google:
http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html
I've been trying to use #font-face on a site, I use the css that font squirrel gives me and it looks good in Safari, IE and on the iphone but in firefox it don´t show up.
I have Firefox 7.0.1 on Mac OSX Snow Leopard.
I've searched the web and tried some of the "solutions" but none has worked.
the site I wanna load this #font-face is http://www.utochinredning.se
Can some one point me in some direction of what might be a solution?
Post your code?
Shot in the dark, but have you included all the appropriate font files? This is a sample of what your #font-face should look like (at least what mine looks like)
#font-face {
font-family: 'Museo300';
src: url('Museo300-Regular-webfont.eot');
src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Museo300-Regular-webfont.woff') format('woff'),
url('Museo300-Regular-webfont.ttf') format('truetype'),
url('Museo300-Regular-webfont.svg#Museo300') format('svg');
font-weight: normal;
font-style: normal;
}
I have the following font files:
Museo300-Regular-webfont.eot
Museo300-Regular-webfont.svg
Museo300-Regular-webfont.ttf
Museo300-Regular-webfont.woff
Then in your stylesheet:
h1 {
font-family: "Museo300";
font-weight: normal;
}