I need your help in solving a very strange issue.
We need to make "Arial" to be 100% similar in all browsers. To do that we used #font-face and used a different file name for Arial.
It works fine in all browsers (pixel by pixel similar), however in some machines it is behaving different .... all systems have same configuration and browser versions.
issue seems to be with Mozilla so far.
I have tried everything but no result.
I used 'font squirrel' to convert fonts (basic/optimal/expert).
here is my CSS.
#font-face {
font-family: 'conduit_arial';
src: url('../Helper/Fonts/conduit_arial.eot');
src: url('../Helper/Fonts/conduit_arial.eot?#iefix') format('embedded-opentype'),
url('../Helper/Fonts/conduit_arial.woff2') format('woff2'),
url('../Helper/Fonts/conduit_arial.woff') format('woff'),
url('../Helper/Fonts/conduit_arial.ttf') format('truetype'),
url('../Helper/Fonts/conduit_arial.svg#conduit_arial') format('svg');
font-weight: normal;
font-style: normal;
}
we used different name in font face and different file name also so that browser do not load Arial from system fonts.
Friends kindly help me to identify the issue.
Thanks
I'm afraid that this is not posible at 100%. Let me explain you why:
Arial could be probably the most wide spread font. Let's say that this doesn't make us feel safe.
As you've done, you can be sure to load the same font by using font-face and a diferent name for the font. Can you be sure now? not completly, as there are browsers that may not support font-face...
Let's say you don't need to support browsers older than ie9. Now you must be sure... No again! Different browsers and different OS's have diferent ways of dealing with fonts. Windows has the ClearType engine for rendering and is different from OS X's engine (more info here: http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/)
Let's say you only need to support Windows 7 and 8. Now you must be sure... No again! Different browsers may render the fonts in different ways. For example, older versions of Chrome didn't have a very good antialiasing on windows. Their fonts were sharper but uglier!
My advice: As you can see, there are many things you can't control... Still, there are some good-practices that you could follow so as to diminish problems. Try to give exact pixel dimensions to your fonts, even when you are using em's and specially for smaller font sizes. For example, use 0.875em rather than 0.9em, avoid fonts designed for printing, specially in content (like the commonly used Helvetica) and make wise use of font fallbacking.
Related
I ask out to the community if anybody has ever had any issues embedding fonts on their website and it being rendered terrible as the outcome? This is the case across all latest browsers not tied to a specific browser...
Tried adding certain css rules to change the fonts weight, style, smoothness etc but doesn't seem to effect the font by any means, any ideas?
You will notice that the letter 'A' is not as it should be but the correct font types are loaded with no issues.
Font can be found here
Screenshots
Embedded font CSS
#font-face {
font-family: 'Linotte Semi Bold';
src: url('/fonts/linotte-semi-bold.eot');
src: url('/fonts/linotte-semi-bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/linotte-semi-bold.woff2') format('woff2'),
url('/fonts/linotte-semi-bold.woff') format('woff'),
url('/fonts/linotte-semi-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
As we speak I've just received confirmation from MyFonts that sometimes fonts are configured slightly different depending on the font used and may need some tweaking to the Hinting settings when downloading a webfont kit.
The following steps fixed the issue regarding the letter 'A' and now displays correctly as expected:
You may want to try downloading a webfont kit configured to use a different Hinting setting.
Simply log into your MyFonts order history at: https://www.myfonts.com/my/orders/kitbuild.html
Select the webfont you would like to use.
Under the 'Hinting' sub-head, select 'Smooth', 'Native', or 'None' (Best was the default). It may take a couple of tries, depending on the font and how it's used.
The custom Webfont Kit Builder will select a CSS script by default. If you would prefer to use JS, simply change this option at the bottom of the page.
Download the new kit and replace the existing webfonts/stylesheet in your server.
Try this, it fixed some of my font appearance in the past, but it's kind of a shot in the dark. That "A" really looks strange, does it look the same if you install the font on your system and use it in photoshop or word or anything else?
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.
I'm making a Web Portal using Zope/Plone4 CMS.
Well, I used #font-face to declare the typography for headings.
The code and font are from Font-squirrel.
I made the website in local machine (without install the font in my PC) and everything works fine.
But in Plone, IE8 doesn't render the font at all. ONLY IE8, when IE7 and IE9 renders perfectly (?)
I made a test using Google Fonts. Everything works fine, all browsers.
I think it's possible that the error come from read/write permissions or something, because the font doesn't render at all in any IE if I was logged out.
This explains why Google Fonts render correctly (font is hosted outside Plone). But doesn't explain the only-IE8 issue...
I post the code here, well, I think is irrelevant, but if it helps...
#font-face {
font-family: 'TeXGyreAdventorRegular';
src: url('../font/texgyreadventor-regular-webfont.eot');
src: url('../font/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/texgyreadventor-regular-webfont.woff') format('woff'),
url('../font/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../font/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family:'TeXGyreAdventorRegular'}
I'm not Zope developer and don't have programming skills, Don't know if I'm looking for a solution in right way. I mean, I think CSS is correct and the problem comes from other side. But want to exploit all posibilities in my hand before definitely abandoned custom fonts from this site.
Note: Google Fonts works right, but all the fonts I have tested render very awful in Windows, and the site must be very accesible (and perfect legible). I prefer to avoid it.
You have to add an .eot (Embedded Open Type) file. This format was created by Microsoft over 15 years ago. It’s the only format that IE8 and below will recognize when using #font-face.
You can make one easily by using the free converter ttf2oet
I've had this problem in a lot of different webs. You have a font which has different anti-aliasing options, the designer uses the same font with different anti-aliasing options on different parts of the text on the web. So there is a difference between some elements.
In this case I have sharp, crisp, strong and smooth. I've used a font generator to get the code to access it via #font-face. Even so, I also have the original .otf if important to know. Is there a method to access this?
I upload a picture of what I mean and my actual code:
#font-face {
font-family: 'light';
src: url('../_fnt/light/gothamrnd-light.eot');
src: url('../_fnt/light/gothamrnd-light.eot?#iefix') format('embedded-opentype'),
url('../_fnt/light/gothamrnd-light.woff') format('woff'),
url('../_fnt/light/gothamrnd-light.ttf') format('truetype'),
url('../_fnt/light/gothamrnd-light.svg#../_fnt/light/gothamrnd-light') format('svg');
font-weight: normal;
font-style: normal;
}
No, there is no way to control the rendering of text in that way. Those are Photoshop specific settings as it has its own rendering engine, they aren't even available to other programs.
Actually, different browsers will render the text in different ways, and even the same browser on different computers will render it differently depending on the system settings.
If you make the page look exactly like the design in one browser, it will look rather different in another browser. You should normally test it in different browsers and try to make it look as close as possible to the design in most of them, and make sure that it's not too far from the design in any of them.
Only WebKit browsers on Mac OS X have recognized a CSS property related to font smoothing, namely -webkit-font-smoothing. Even there, it’s unclear what’s happening, as they seem to be removing the antialiazed value, see webkit-font-smoothing: suddenly different results in chrome and safari
So for practical purposes, regard font smoothing as being out of your hands as an author, and test your fonts under different smoothing options to check that the results are at least tolerable.
I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.