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",
Related
I try to install Roboto on my website, using Google Fonts, and I feel desperate to see that Roboto is bolder (much bolder) in Firefox than in Google Chrome.
Here are my codes :
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
And
p
{
font-size: 1.4rem;
line-height: 1.5;
font-family: "Roboto", sans-serif;
letter-spacing: 0;
color: #313131;
}
And here are two preview of Roboto Font, first with Firefox, second with Chrome:
As you can see, the Chrome Roboto is much lighter.
I don't know why it happen, but I've find something on Google Font. Using Firebug on their own code, I discover that the Roboto Font used on their website has attributes :
element.style {
font-family: "Roboto script=all rev=1";
}
And when you remove the "Script=all rev=1", Roboto become much bolder in Firefox and in Chrome (but so much in Firefox). Just like on my Work in progress.
Does somebody have an answer, a solution, or something? I feel lonely to see that not even Google can inform me about what is script=all rev=1 and why it makes Roboto much lighter on Google Font.
The reason it is lighter is because Chrome is using a locally installed Roboto Font which does not have the bold version, and it is thus falling back to the thin version (rather than switching to the web font.) This is arguably a Chrome bug but I don't know of any existing report.
According to Force Chrome to use external font in CSS the special font name works because the Google Web Font stylesheet gives an alternate name for the font "Roboto script=all rev=1", which obviously doesn't exist on the user's local system and thus gets served by web font.
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+
link is :
http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx
Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?
As Jukka has said it is not a supported font on iOS so you have three options.
Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS #font-face.
Use an online font hosting service such as Google Webfonts
To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.
#font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}
Note: Google Web Fonts does not have Lucida Sans available.
It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?
My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.
You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:
font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
I went with the following fallback fonts:
font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
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