Not too sure if this has been asked before with specifics to Locally Available fonts.
I'm loading two font stacks on my local development site
// font stacks - http://cssfontstack.com/
"Arial", "Helvetica Neue", Helvetica, sans-serif;
"Georgia", Cambria, Times New Roman, Times, serif;
The Arial font stack behaves as expected however the Georgia font stack skips Georgia and Cambria on Chrome. Firefox displays both exactly as expected. Both fonts exist on my local machine... Does anyone have any reasons why this would be happening?
I think you see result of Issue 421305 # Chromium http://code.google.com/p/chromium/issues/detail?id=421305
scottmg#chromium.org says: "If DirectWrite fails to enumerate the system font collection (corrupt font, etc.), or we exceed 1750 fonts, we abort and load a very small set that does not include Verdana or Georgia. Obviously this is a hack. Shrikant has a patch out to fix this properly. In the interim, the only quick fixes are to reduce the number of fonts in %WINDOWS%\Fonts below 1750, or go to chrome://flags and disable DirectWrite."
The problem affects Chrome 38 and AFAIK last Opera with webkit core too... confirmed are issues with Georgia, Verdana, Tahoma, Calibri, Trebuchet and other locally hosted fonts.
It should be fixed in Chrome 39+
Related
When I inspect elements on my site using the Chrome developer tool, I see the following as my element's "Computed" style:
font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif
But if I scroll down further (to the bottom of the "Computed" tab) I see:
Rendered Fonts
Liberation Sans—Local file(11 glyphs)
Since my (Linux) OS must have Arial and sans-serif, I'm confused as to why Chrome would pick "Liberation Sans": it isn't even on my font-family list.
I'd blame my own bad CSS, but in theory the "Computed" tab shows the final/processed version of my rules, so however terrible my original CSS may have been, Chrome clearly sees my font-family list defined (and being applied) to my element ... it just ignores it.
Can anyone explain this mystery?
EDIT: I installed a font-checking program and it turns out that Linux (Mint) does not in fact come with an Arial or sans-serif font ... but even so, I thought browsers provided (at least) a basic sans-serif font, no matter what the OS? Is that incorrect?
Your font stack specifies Arial.
Arial is not present on most Linux systems for licensing reasons, and it is usually aliased to Liberation Sans, since Liberation Sans has the same dimensions (metrics) as Arial. The font design, however, is different (that's why Liberation Sans is usually not the default Linux sans serif font, its design is not popular).
Helvetica is another well-known legacy font name usually not present. If you try to use it in the font stack it will usually trigger all kinds of aliasing. It may even trigger the Liberation Sans alias before Arial (since Arial was Microsoft's poor-man Helvetica replacement when windows launched and has about the same metrics).
(When you create a PDF that specifies Helvetica on Windows it will usually substitute ArialMT).
If you only specify sans-serif you will get the system "best" sans-serif font, usually clean well-loved designs, but their dimensions vary widely from system to system.
Due to the number of broken web sites whose designers assume all systems ship with the same fonts, with identical pixel widths that can be fixed in the page design, font substitution is usually done on metric first, design second priorities.
The only way to get the same font on all clients is to use web fonts, but that will slow down your site due to the font download and users (not "designers") prefer fast pages. Web fonts demand to be careful about licensing and font unicode coverage, security-conscious users will block third-party downloads, and there is a lot of cargo-culting about obscure web font formats (opentype is sufficient in most browsers nowadays).
The kind of Apple maniac that thinks HelveticaNeue is the alpha and omega is usually satisfied with Open Sans as web font.
But even with web fonts the rendering will be slightly different since different systems use different text engines that all have their specifics, with some fonts working better than others for a given engine.
There are two font fallback mechanisms in Chrome for Linux. One is OS-level fallback. Another one is CSS specified fallback. The OS-level fallback mechanism returns Liberation Sans to Chrome instead of none or not found while Chrome asking if the HelveticaNeue available in your OS. Chrome takes the returned Liberation Sans and believes OS returned answer so ignores the CSS subsequent font fallback list.
I see that you have both Helvetica and Arial in your font-family properties. I'm guessing that you want Arial when Helvetica is not available...An answered question that deals with this is: two fonts
Now, if I wanted to have only one font-family, such as Century Gothic, I would do:
font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;
This is a good guide.
My question is, why do you have so many
Because Google Chrome, somethiing leave the WWW from the url, you can try to put it manually.
Especially in Unix or Mac system.
I noticed today that a site I developed has suddenly stopped rendering the "Arial Black" font face in chrome.
Does anyone know if any recent Chrome updates could have caused "arial black" to stop working?
Even the example on w3schools has stopped working in chrome: http://www.w3schools.com/cssref/css_websafe_fonts.asp
It comes set by default with the latest Chrome update (Version 37.x) (Originally on Chrome 35 beta and not set by default) and it's how Chrome uses the DirectWrite API on Windows to render the font.
If you want the old behavior open chrome://flags/ and enable Disable DirectWrite.
This will disable the use of experimental DirectWrite font rendering system.
Also as noted in this bug report:
This all comes from DW treating font weights as different variations
of the same font, unlike GDI. Thus Arial Black is considered to be
Arial with a weight of 900 and that matches the specified family.
So if "Arial Black" falls back to "Arial" with a weight of 900 and weight of 900 in Arial is not the same 'weight' as Arial Black, then you will see the difference in the rendered font.
In my case enable Disable DirectWrite doesn't solve the problem.
I figured out here that the problem actually was not only in the font Arial Black but Helvetica Neue.
Simply edit:
C:\Users[YourName]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\custom.css
and add the two code given below
#font-face { font-family: ‘helvetica neue’; src: local(‘Arial’); }
#font-face { font-family: ‘helvetica neue’; font-weight:bold; src: local(‘Arial’); }
Use arial black or arial narrow.
Example:
font_formats: "Andale Mono=andale mono,times;"+
"Arial=arial narrow,avant garde;"+
"Arial Black=arial black,avant garde;"+
"Courier New=courier new,courier;"+
"Georgia=georgia,palatino;"+
"Impact=impact,chicago;"+
"Symbol=symbol;"+
"Tahoma=tahoma,arial,helvetica,sans-serif;"+
"Times New Roman=times new roman,times;"+
"Verdana=verdana,geneva;"+
"Webdings=webdings;"+
"Wingdings=wingdings,zapf dingbats",
I have a rails project I am using bootstrap+compass on.
The default font family is:
"Helvetica Neue", Helvetica, Arial, sans-serif
However my fonts are displaying in Times.
If you look at this screenshot taken from the "computed style" section in Chrome you can see that yes, it sees that as my font-family but is rendering Times anyways. Which isn't even a san-serif font, so the only way I can possibly imagine in which this would be the case is if I had no sans-serif fonts in my computer at all. Which is not the case!
Any ideas what is going on?
I created this website:
http://imageworkz.asia/sixsensestester
It has a font-family of "Century Gothic" set and it works fine in all browsers except in MOBILE Safari. Take note that it is a MOBILE Safari since the font is good in normal Safari. Any suggestions?
You can provide fallback fonts in your stack. If nothing else, just fall back to default sans-serif:
font-family: 'Century Gothic', sans-serif;
For mobile Safari it's probably whatever Helvetica Apple has licensed. If that's not good enough, do some web searches for "Century Gothic substitute iOS" or just look through the list of fonts available to iOS in order to pick another fallback if Helvetica doesn't work for you. Then it would be:
font-family: 'Century Gothic', SomeFont, sans-serif;
The page does not display Century Gothic on my Android either. Not a big surprise, since mobile devices often have rather limited font repertoires.
Even on Windows systems, Century Gothic is not universal but probably below 90%, see
http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml
I want to use Helvetica Neue Condensed Bold on my webpage but it doesn't seem to be working. I have tried this: http://jsfiddle.net/ndFTL/ but it does not work, it simply shows up as Helvetica Neue Bold.
I have Helvetica Neue Condensed Bold installed:
Could anyone please help me out?
After a lot of fiddling, got it working (only tested in Webkit) using:
font-family: "HelveticaNeue-CondensedBold";
font-stretch was dropped between CSS2 and 2.1, though is back in CSS3, but is only supported in IE9 (never thought I'd be able to say that about any CSS prop!)
This works because I'm using the postscript name (find the font in Font Book, hit cmd+I), which is non-standard behaviour. It's probably worth using:
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
As a fallback, else other browsers might default to serif if they can't work it out.
Demo: http://jsfiddle.net/ndFTL/12/
I had the same problem and trouble getting it to work on all browsers.
So this is the best font stack for Helvetica Neue Condensed Bold I could find:
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;
Even more stacks to find at:
http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/
In case anyone is still looking for Helvetica Neue Condensed Bold, you essentially have two options.
fonts.com: License the real font as a webfont from fonts.com. Free (with a badge), $10/month for 250k pageviews and $100/month for 2.5M pageviews. You can download the font to your desktop with the most expensive plan (but if you're on a Mac you already have it).
myfonts.com / fontspring.com: Buy a pretty close alternative like Nimbus Sans Novus D from MyFont ($160 for unlimited pageviews), or Franklin Gothic FS Demi Condensed, from fontspring.com (about $21.95, flat one time fee with unlimited pageviews). In both cases you also get to download the font for your desktop so you can use it in Photoshop for comps.
A very cheap compromise is to buy Franklin from fontspring and then use "HelveticaNeue-CondensedBold" as the preferred font in your CSS.
h2 {"HelveticaNeue-CondensedBold", "FranklinGothicFSDemiCondensed", Arial, sans-serif;}
Then if a Mac user loads your site they see Helvetica Neue, but if they're on another platform they see Franklin.
UPDATE: I discovered a much closer match to Helvetica Neue Condensed Bold is Nimbus Sans Novus D Condensed bold. In fact, it is also derived from Helvetica. You can get it at MyFonts.com for $20 (desktop) and $20 (web, 10k pageviews). Web with unlimited pageviews is $160. I have used this font throughout (i.e. NOT exploiting the Mac's built in "NimbusSansNovusDBoldCondensed" at all) because it leads to a design that is more uniform across browsers. Built in HN and Nimbus Sans are very similar in all respects but point size. Nimbus needs a few extra points to get an identical size match.
"Helvetica Neue Condensed Bold" get working with firefox:
.class {
font-family: "Helvetica Neue";
font-weight: bold;
font-stretch: condensed;
}
But it's fail with Opera.
You would have to turn your font into a web font as shown in these SO questions:
Non-Standard fonts in web?
How to add some non-standard font to a website?
However, you may run into copyright issues with this: Not every font allows distribution as a web font. Check your font license to see whether it is allowed.
One of the easiest free and legal ways to use web fonts is Google Web Fonts. However, sadly, they don't have Helvetica Neue in their portfolio.
One of the easiest non-free and legal ways is to purchase the font from a foundry that offers web licenses. I happen to know that the myFonts foundry does this; they even give you a full package with all the JavaScript and CSS pre-prepared. I'm sure other foundries do the same.
Edit: MyFonts have Helvetica neue in Stock, but apparently not with a web license. Check out this list of similar fonts of which some have a web license. Also, Ray Larabie has some nice fonts there, with web licenses, some of them are free.