I am using Chrome for a very long time now and I happy with it. Unfortunatly they discontinued the DirectWrite option. This is hell for people that aren't using Clear type fonts. Most fonts are messy now.
I want a Stylish sheet that replaces all website fonts with Arial. So I want every website to display the Arial font. I don't know how to do it.
Thanks! :-)
I am not sure whether you can do this through chrome settings, but I found a great extension FontChanger that does the trick
Related
I make an website("http://duco.md/"),how can make it crossbrowsing.
When i access the site with safari it doesn't display the text from some blocks.
What can I do? Thanks
You can use Chrome Extension - BrowserStack Local for cross-browsers
testing.
Use Font Book application and validate all fonts.
Remove or replace corrupted third party fonts which causes
font rendering issues.
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I am using two Google Web Fonts at my website. They are Roboto Slab and Fauna One. They look good in latest Mozilla Firefox and IE10 but for some reason they look horrible in Google Chrome.
They are linked to my website as follows:
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
It took me a while to realize that Google Chrome has a problem with web fonts and that it renders them poorly. I am wondering if there is solution for this?
What if I download those two font types and embed them into the main directory of my website and then call them through CSS via #font-face property? Would Google Chrome in that case render those fonts nicely or I would still have the same problem and poorly rendered fonts???
Or there is some other solution for this issue?
Thank you all!
I believe I saw some bug report for Chrome where it was mentioned that this will be fixed - but I'm not 100% sure. I believe that it's not actually 100% the fault of Chrome...
My understanding is that the problem is to do with the order in which font types are presented in the #font-face directive. So, Chrome handles more than one type but not all types will render at equal quality. Apparently, Google actually doesn't serve the fonts in the right order from fonts.google.com - somehow...
In the end I found that, with Roboto at least (which I'm also using on a project), it is available for use on Font Squirrel (and open sourced under the Apache 2.0 license) - so you can download it here: http://www.fontsquirrel.com/fonts/roboto (download the Webfont Kit for full cross-browser font support) - you lose the CDN goodness of having it hosted on Google's servers if you use it from your own web server but, IMHO, I'd rather lose a few milliseconds than have to deal with such terribly rendered text...
I can't help you with Fauna One, unfortunately - it doesn't appear to be listed on Font Squirrel - perhaps you can find it on another font site? Or another similar font which is available on font squirrel?
From a web browser perspective (Chrome being the browser in question), Chrome 35 in Windows has difficulty rendering some fonts, like Roboto, without some horrible artifacts that make the font difficult to read.
There is a feature called DirectWrite that will be included by default in future versions of Chrome that will fix this problem. You can enable it now in Chrome 35 by going to chrome://flags in your browser URL bar. You can Enable DirectWrite (experimental in Chrome 35), close your browser, open and try again.
Just to be clear, I discovered this problem on Chrome 35 for Windows. DirectWrite is a DirectX API for rendering fonts in Windows. Chrome by default uses Windows Graphics Device Interface (GDI) which seems to be the problem.
See this article
I've checked a few places for an answer but I could not find one, so I thought I'd ask. I created a website on a free HTML5 template (the template was for a photo gallery). The website works fine on Google Chrome and Firefox but for some reason, some stuff like the fonts dont appear in Internet Explorer (tried with and without compatibility settings on IE9). Could this be because of IE's security measures or have I coded it incorrectly?
The website is at masidtech.com
On Chrome it looks like
But on Internet Explorer it looks like
I was going to use paste bin but the pastes look really ugly for source code.
So I have uploaded the entire website to MediaFire at http://www.mediafire.com/?9m2108pgzyje79t
and it's a 7Zip file (or I guess you could view source)
+I am no coding guru so I'd really appreciate if you could throw in some layman and thanks.
I faced similar issues in recent past. I can help you if you provide certain details. I just checked the link with the working image. I also tested the link with the notworking.jpg
Can you tell me the exact url in the browser which u see after http://masidtech.com/
for the non working image.
This is not a big issue, with modern browser in scene, and due to their hefty security policies the same website behaves differently in different browsers.
It seems that cufon doesn't work in IE9 – a friend has had a similar issue this week. I'm not sure why, or if there is a way to get cufon to work, as I haven't used it.
There are two options - keep using Cufon (why? I don't really get why Cufon exists!), and add this above your first replace() call:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
Alternatively, and prefered, use font-face. If you use a eot, ttf and woff version of your font, it will work everywhere. http://www.fontsquirrel.com/fontface/generator has a tool to generate the fonts and the code from a ttf, if the font allows it.
You may find that http://www.google.com/webfonts has the font needed instead, which is Google's way of hosting fonts.
Edit: I've had a look and found Google has it: http://www.google.com/webfonts/specimen/Quicksand . Follow the wizard, stick their one line of code in your <head>, remove cufon and it will work.
Nice site design by the way :)
I am currently using Josefin Slab from Google Web Fonts API and having some rendeding / spacing issues. I have tried everything to get the vertical alignment to match up from Firefox OSX to PC and cannot get them to render correctly. Does anyone have experience with this that can lend some insight, I would like to continue to use the fonts for the navigation but may have to move to images for cross browser consistency.
Does anyone have any pointers of similar issues they may have experienced and addressed?
This is not an answer but a possible workaround for you.
Webfont is tricky even Google can't get it right, it is mostly due to the fact each platform interpert the same font file differently. If you know scripting, you could detect OS, add className and adjust the style for each platform. Modernizr could do the same thing.