I formerly used the plugin WP Google Fonts, which hasn't got my requested feature, either.
For now I'm using Google fonts with an implemented feature in the currently used theme. The fonts are embedded without trouble and they are shown correctly.
For now there are plenty blogs with nicely readable smooth fonts for HD displays and I want those fonts, too. As seen in my WordPress, it is capable of showing them, example below:
There are no sharp edges, no pixels, etc. That's how I would like it.
I selected "Droid Sans" currently as the font for my articles. But this font shows up WITH sharp edges and pixelated. Example below:
(Please note that opening this picture in a new tab shows the issue much more clearly.)
Is there anything to make this look smooth and cool?
Is it just the wrong font? I'm not bound to it and tried some others fonts. They all seem to have those sharp edges. If you know a font for compare, please note it.
Is there a CSS snippet I have to add?
Is it a server-sided configuration?
How can I achieve smooth fonts in my articles page?
It can depend on what browser you are using.
I tend to use:
-webkit-font-smoothing: antialiased;
or if you have blurry bold text:
-webkit-filter: blur(0.000001px);
on webkit browsers.
Alternatively, you can add a text-shadow to make the text seem smoother
html, html a {
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
I also recommend you try different font sizes as some custom fonts will only look good at certain sizes.
Other than that, there isn't much you can do apart from use another font. Google Chrome did just release an update for smoother fonts. It might also be useful to look at svg fonts:
Google Fonts & http://www.fontspring.com/demos/svg-vs-woff/
I solved this issue, using google fonts like SVG:
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
</style>
Related
I include say "Noto Sans" or "Ubuntu" on my webpage via css "#import".
If I compare the rendering on my page with the rendering on the GoogleFonts page it looks different for both fonts.
Even though I paste the same text into GoogleFonts and choose the same size, same background, same color.
Here is a picture: (especially visible with the "A")
Any idea if there is a setting I miss?
As you can see neither the weight nor the size matches. Especially the weight seems to be a problem. Comparing "Noto Sans" the font with the same weight looks much thicker on my page.
I downloaded the fonts from google into my system. But this also applies if I delete these fonts and the browser uses remote fonts.
I use MacOSX but checking in Browserstack it seems that the problem is effective in several browsers. I tested in Win7 with IE9 too.
Not sure about the IE browsers, but have you tried adding -webkit-font-smoothing: antialiased;? Google also uses -ms-text-size-adjust: 100%; for IE.
I'm using josefin sans font from Google fonts. It looks crisp and sharp on their website and consistently so for all browsers. But when I import the fonts to my site via linking to provided css file , they look thin and blurry. I know about some fixes you can do, but they don't work consistently. why does this happen? Does putting these fonts locally help ?
Each font (or almost each) hash a few "sub-fonts" if you will which are slight variations of the original font. Make sure you select the one you really want. Look at the variations:
Josefin Sans
Did you make sure to include all of the needed font files?
Your CSS link should look something like this:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600' rel='stylesheet' type='text/css'>
in most browsers the site I am creating is fine. But in Google Chrome the font I'm using has lots of cracks in it and doesn't render properly at all.
Chrome:
FireFox:
I've tried various fixes for it but am still unable to get it to how the site is on firefox. Here is my CSS for the font face:
#font-face {
font-feature-settings:'liga=0';
font-feature-settings:'liga' 0;
-moz-font-feature-settings:'liga=0';
-moz-font-feature-settings:'liga' 0;
-webkit-font-feature-settings:'liga=0';
-webkit-font-feature-settings:'liga' 0;
font-family:'ChampagneLimousines';
src: url('/Resources/CLB.eot'); /* IE9 */
src:url('/Resources/CLB.svg') format('svg'),url('/Resources/CLB.woff') format('woff'),url('/Resources/CLB.ttf') format('truetype');
font-weight:700;
font-style:normal;
}
A few things to try:
Get the official web font files for your font if possible
Otherwise use a tool like the font squirrel generator
Use the bulletproof font face syntax
Use the Chrome SVG font trick for smoother rendering in Chrome
Chrome renders better at certain font sizes than others. Try setting e.g. font-size: 16px then incrementing / decrementing 1px at a time to find a compromise
It could just be that your web font is badly hinted, so find an alternate one
Note that Chrome, Firefox and IE all use different font rendering engines, so they'll always look a bit different
You can follow these steps:
Control panel-> Fonts -> Adjust clear type.
I found this solution and it worked for me.
Im using the 'Lato' font from google web fonts, and its displaying fine on all browsers apart from safari.
Im using it in font-weight:100;
here are some screen shots of the different browsers. Any idea what might be causing it to render extremely thin ? Or if theres a way i can set it to render in font-weight:300; for safari only ?
Ive also made a js fiddle of the problem - http://jsfiddle.net/qLHuc/1/
FIREFOX
CHROME
SAFARI
I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/
However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.
I also faced similar issue, when I tried to use google fonts with font-weight:300 - its working fine in all browsers except safari.
I resolved this by adding below css property.
-webkit-font-smoothing: antialiased;
I was running into a similar issue that appeared exactly the same. I was using the CSS font-weight: lighter; while using this google font link:
http://fonts.googleapis.com/css?family=Lato:300,400
Somehow it was displaying as 100 weight! So, I now explicitly use the font-weight:300; to get what I want. I'm not sure, but I believe this likely has something to do with me having the font on my system, and google suggesting my computer uses the system font before downloading it again... Wouldn't have figured it out without this Q and A, thanks!
i am converting psd to html and font used in psd is moolboran, my tag font-family: MoolBoran;, which is not supported by browsers, how can i overcome this problem? is there any possible solution to as alternative?
Your options are to either save an image with your non-standard font, or use the CSS property font-face, and allow the site visitors to download the font file. For more details of this approach, see CSS 3: Custom Fonts Using #font-face.
Web safe fonts have been a bane to designers for a while, but you can check out Google Web Fonts to see if there's a font that's close (it doesn't look like they support MoolBoran unfortunately)
The only solutions are to
A) use an image rather than live text (which is generally a poor method)
B) See if a web font version of "MoolBoran" is available somewhere. And use the #font-family selector. I looked but can't find anything for it.
C) Change your design.
There is nothing wrong with that tag, it's certainly supported by all browsers.
The font does of course have to be installed on the visitors computer, which is probably where you have your problem.
If you want that exact font, you can make an image out of the text. That is the only sure way to get exactly the look that you want across all browsers.
You should supply fallback fonts in your tag, for example:
font-family: MoolBoran, Geneva, Arial, sans-serif;