I have come across an odd problem using 'Helvetica Neue W01 97 Black Cn' #font-face font from webfonts.fonts.com
When used in Windows based browsers (tested FF and IE), in this case in a submit button, the text seems to acquire an extra 4px or so of padding (see ff-pc-style.png). In the case of my current design, this centers it perfectly in the submit box.
In OS X, across Firefox, Safari, Chrome and Opera, the padding is lost, yet an extra 0.4px is added to the line height and height (see ff-pc-style.png).
If I remove the custom font, the fallback font (Arial), appears properly centered in OS X.
Why does this occur? And how would I get round it?
Platform detection seems like overkill just to fix a font ...
ff-pc-style.png
ff-pc-style.png
E-mail reply from fonts.com support:
A fault has been found in the font
data hinting. It is being looked at
now. Once the data has been updated, I
expect that you will only have to log
into your account and just save and
update your stylesheet to update your
page.
Related
I’m experiencing an issue with Safari where a block of text using webfonts (not sure webfonts are the issue) is wrapping differently in Safari than it is in any other browser. In this particular instance, we’re designing these blocks to look like they’re set to text-align: justify; but they’re actually set to text-align: left;. text-align: justify; is undesired in this setting as it does a poor job of calculating the space between words.
Important things to know:
As I mentioned, the layout uses webfonts. It doesn’t matter which webfonts (I’ve reviewed hundreds and it happens for all).
The entire page, including padding and font-size, uses viewport width (vw). The idea here is that the block of text scales equally for all browser sizes and retains it’s layout, including rags.
A visual aid:
Details about the layout and dimensions:
Frame 1: Safari desktop.
Frame 2: Chrome desktop.
Frame 3: Chrome at 50% opacity over Safari.
Window width in this screenshot is 1220px.
Left/right padding is padding: 0 calc(129 / 1220 * 100vw); which computes to 129px.
That leaves the available content space of 962px.
letter-spacing is set to 0 by default for all content.
So, anyone have any idea why Safari seems to have exaggerated tracking/letter-spacing?
EDIT
We just launched the site in question, so you can see the issue in action here: https://www.typography.com/fonts/hoefler-text/overview
Well, there's a bunch of stuff at play.
First of all Chrome and Safari use different defaults for rendering text, But in addition to that Chrome on different versions of MacOS or Windows will render text differently too because of how the system font rendering works.
You can typically make Safari and Chrome (on the same system) feel a bit closer by setting your text CSS to:
text-rendering: optimizeLegibility Since this is the default on Chrome but Safari defaults to optimizeSpeed
It might also be wise to explicitly set: font-feature-settings: "kern"; and font-smoothing: antialiased (note those both need vendor prefixes)
Next, make sure to specify a numeric font weight. Eg: font-weight: 400 for "regular". (The browsers might not pick the same weight for the normal/bold keywords)
Finally, make sure you're serving up the most optimized version of a webfont (Typekit & Google usually do this for you, but it's an issue if you're self-hosting the fonts)
Edit:
It might be worth forcing both Chrome and Safari to create a "compositing layer" (basically means its GPU accelerated). You can do that with backface-visibility: hidden. Though I suspect this is a MacOS specific thing and there may not be a solution in the browser.
Adding font-feature-settings: "kern"; to the element for the fonts solved my problem with Safari not rendering the letter-spacing properly.
I had the similar issue while building an html banner using a .woff font: Safari was applying an exaggerated tracking/letter-spacing.
Bryce's suggestion to use font-weight: 400; fixed the issue.
Please see the above image. I'm using the icon font 'FontAwesome' on my website. In the website header, I'm using them for navigation icons. Each of these icons are links, that have the 'fa' and 'fa-2x' classes attached.
I'm not overruling any default font sizes or rendering modes for FontAwesome, so this is a clean state. All screenshots are from Windows 8.1, testing several browsers. Here are my findings:
Firefox: perfect rendering, optimal balance between legibility and anti-aliasing
Chrome: font rendering too thick and harsh, hurting legibility
Safari: reasonable legibility, yet a bit too thin and harsh
IE10: Very close to FF, acceptable as-is
Opera: Same as Safari
Mu ultimate goal would be to have ideal rendering across browsers, as per the Firefox example. A perhaps more realistic goal is to beat Chrome into submission, as it presents the biggest issue.
Font-Awesome by default has this applied:
-webkit-font-smoothing: antialiased;
I've tried setting this to the other text rendering modes, yet none seem to make a meaningful difference, the same is true for setting the text-stroke property, even at 0 the 'thickness' problem remains. That problem is best seen from the 'members' icon.
You can see the rendering live at www.jungledragon.com
Any clues/tips on how to improve rendering quality and consistency?
That's old issue I can see, but I had similar problem with FontAwesome and discovered that weight of these icons can be different depending on font-weight attribute (that's a font, after all).
So, my problem was that narrow holes in icons becomeing invisible in my app and the solution was setting the font-weight attribute to normal in CSS.
For my liking, icons in Chrome version of your issue are just "overweighted" that way.
I have a page that is multi lingual and I have an issue with the Japanese version only.
For some reason in IE8, when I hover over an element, a sibling's font-size will increase/decrease.
Even stranger, is that this doesn't happen on every hover, sometimes I cannot reproduce straight away, I need to keep hovering over different elements in the same area of the page. Eventually this bug will rear its ugly head.
This bug only occurs on the Japanese page, all other languages seem to be fine.
This could be happening on other versions of Internet explorer, I haven't tested on all.
To clarify, I have not got any font-size changes on any :hover rules.
I work for a Japanese site and recently came across this issue. After spending more time than was reasonable, I found the answer from these detailed write-ups in Japanese:
http://freesoft.tvbok.com/sonota/ie8-fontsize.html
http://social.technet.microsoft.com/Forums/ja-JP/internetexplorerja/thread/70d700f4-0bda-48b1-9476-d31993b7cbf4/
The top link includes the ways to deal with it. For those who can't read Japanese I will summarize:
The problem only affects IE8 showing pages using the MS P Gothic font (generally the default Japanese font on Windows) at a font-size that is between 9px and 11px. Unlike many IE bugs, it has nothing to do with floats/margins/line-height/etc. As Oldie has pointed out, the bug is not consistent, sometimes it happens right away and sometimes it takes a few hovers, and it seems to enlarge/shrink the text randomly.
The three primary solutions are as follows:
Set the font to MS Gothic or some other Japanese font using font-family style.
Change the font size to be anything outside the 9px ~ 11px range (Under the default IE8 font settings, 1em sized text will not be affected, but slightly smaller text (eg, 0.8em) will be affected).
Force IE8 to display the page as if it was IE7 by adding the following in the header:<meta http-equiv="X-UA-Compatible" content="IE=7" />
I went with #2 because MS Gothic looked jarring next to all the other MS P Gothic text, and felt #3 had clear disadvantages for our site.
It's not an ideal solution, but it works. Best of luck.
My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.
I've tried copying and pasting from my browser into Word, but it's not preserving the font.
Is there some way to determine which font is actually being used for a section of text?
Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.
It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.
Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.
Firefox
In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:
This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
Like for the above screenshot:
.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular
So, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering "Apple SD Gothic Neo Regular" nicely highlights just the "웃":
Hovering "System Fonts" gets me:
For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its "All Fonts on Page" section it also tells where fonts were downloaded from.
For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!
Chrome
For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it may be using:
For web fonts, Chrome just shows "Network resource" (where Firefox shows many more details).
Like with Firefox, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:
.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)
Safari
The October 2021 Safari 15 has finally introduced a "Fonts" tab, but its output is quite limited. For "Identity" it often shows secondary information such as "TN web use only" (where Firefox shows that as a comment, like in "Interstate Condensed, TN web use only"). Or shows nothing at all. But, finally, it's a start:
This only works for elements. For text nodes (like a single character), the fonts tab is not shown.
For the same example as used above, Safari does not even indicate multiple fonts are used:
Identity
Name .AppleSystemUIFont
So, read on.
Other browsers (and Safari)
For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "웃" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:
Multiple fonts in a single HTML element
For the above screenshots, the actual CSS defines:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option.
Different fonts in different browsers
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer "Apple SD Gothic Neo" and ".Apple SD Gothic NeoI" (which are OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
Note that Chrome (on a Mac) shows a leading dot and trailing uppercase "i" in "NeoI" which are lacking in Firefox for the same example. On that Mac, Font Book shows:
I've not investigated what that entails.
The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.
Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.
Firefox 22+ will show you which font is currently in use, without any extensions.
There is no need to use any external browser plugins for that.
In order to check which font is really used on the website in Google Chrome, you need to:
open developer tools (right click on a website and select inspect)
select desired object within "elements" tab
select "computed" tab, in the bottom pane you would see "rendered fonts":
You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.
My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.
I've tried copying and pasting from my browser into Word, but it's not preserving the font.
Is there some way to determine which font is actually being used for a section of text?
Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.
It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.
Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.
Firefox
In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:
This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
Like for the above screenshot:
.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular
So, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering "Apple SD Gothic Neo Regular" nicely highlights just the "웃":
Hovering "System Fonts" gets me:
For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its "All Fonts on Page" section it also tells where fonts were downloaded from.
For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!
Chrome
For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it may be using:
For web fonts, Chrome just shows "Network resource" (where Firefox shows many more details).
Like with Firefox, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:
.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)
Safari
The October 2021 Safari 15 has finally introduced a "Fonts" tab, but its output is quite limited. For "Identity" it often shows secondary information such as "TN web use only" (where Firefox shows that as a comment, like in "Interstate Condensed, TN web use only"). Or shows nothing at all. But, finally, it's a start:
This only works for elements. For text nodes (like a single character), the fonts tab is not shown.
For the same example as used above, Safari does not even indicate multiple fonts are used:
Identity
Name .AppleSystemUIFont
So, read on.
Other browsers (and Safari)
For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "웃" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:
Multiple fonts in a single HTML element
For the above screenshots, the actual CSS defines:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option.
Different fonts in different browsers
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer "Apple SD Gothic Neo" and ".Apple SD Gothic NeoI" (which are OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
Note that Chrome (on a Mac) shows a leading dot and trailing uppercase "i" in "NeoI" which are lacking in Firefox for the same example. On that Mac, Font Book shows:
I've not investigated what that entails.
The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.
Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.
Firefox 22+ will show you which font is currently in use, without any extensions.
There is no need to use any external browser plugins for that.
In order to check which font is really used on the website in Google Chrome, you need to:
open developer tools (right click on a website and select inspect)
select desired object within "elements" tab
select "computed" tab, in the bottom pane you would see "rendered fonts":
You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.