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.
Related
Although having read some articles about font-family, I still don't have a deep understanding how it works. So I'm hoping this question may help me better understand how font-family works.
I see some beautiful fonts on a website, the CSS of one of them is font-family:'Futura Today Bold',Arial,sans-serif. I try to copy it to my website, but it doesn't work. It seems the elements affected by this website are displaying default font. Here is a side question: how do I check what font an element is actually using? can I do it with javascript?
And the main question is, how do I use this 'Futura Today Bold' font on my website?
The problem with the font you intend to use is that it will not be installed on every user's device, which is why the fallback font (Arial) is specified in the website you checked.
You need to use web fonts if you wish to use a font that is not available on the user's device. Here's an example CSS code to do that:
#font-face {
font-family: 'Futura Today Bold';
src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
After including the above lines in your CSS code, the font can be applied by the CSS rule font-family:'Futura Today Bold' in your stylesheet.
Also note that as Christina pointed out in a comment, you should not use fonts that you do not have licensing rights to use.
Answering your other question as to how to find out which font is currently being applied, you can use your browser's developer tools to find that out. Here's a screenshot of how it can be done in Firefox.
Source.
Basically you need to have the font actually included in the bundle when the page loads to have access to it. You can easily do this once you have the file by using this html code in your <head>
<link href='font-name' rel='stylesheet' type='text/css' />
or like this into your css
#import('font-name');
After you have done this all you have to do is set the font like you did before
Update
This is needed to define the font name once you have the ttf. Put this in CSS
#font-face {
font-family: 'Futura Today Bold';
src: url('font-name.ttf');
}
If you look at this file:
http://t.whstonecabinet.com/templates/rt_chimera/css-compiled/demo-dee78feaa65fff084c041f8862da3088.css
Then at the beginning you can see this line which is what create the font and if you look in your file tree under fonts/Roboto-Regular-webfont.eot then you can find the eot file:
#font-face {
font-family:'Roboto';
src:url('../fonts/Roboto-Regular-webfont.eot');
src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
There are some sets of fonts that are available in the website by default. If you want to use any other fonts then you must specify the same in your css. Normally font files are available in ttf or otf format.
For example if you want to use Futura Today Bold you should first download the font file from this page.
Next, you can specify in your css, the font path that you intend to use. Visit this link to know more
If you trying to use a font in your website and it doesn't show, in many cases you just doesn't have the font available.
So google and download it (if allowed). To use it in your online websites, you have to provide the font, if you're not sure, wether everybody has this font or not. Providing can be done via #font-face. But keep copyrights in mind.
When a browser renders a page, it uses the fonts from left to right. If the most-left is not available, it goes one step to the right and so on. You will often see something like sans or sans-serif at the right and, to provide a fallback, where the browser just pick a default font of that type.
To see which font is currently used, you can right click that part (in Firefox or Chrome) and inspect the element. Look for the font section. There you can see which font is used. If you see multiple fonts, the most left/top value should be applied.
You would need to actually have the font file in your project or you can download the file using #font-face in your css.
There are quite a few services that offer fonts for download online. Some are free to download (Google Fonts, others are paid (Typekit).
This link explains a bit of how it is with fonts on the web today.
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!
[REVISED]
My custom icon font is not rendering in Mobile Safari on iOS 5. I've confirmed that the problem must be with my CSS.
The font works fine on iOS 6 and on desktop versions of Safari, Chrome, Firefox, and IE9 when using the corresponding eot and woff formats generated by http://www.fontsquirrel.com
#font-face
I'm currently using the following simplified #font-face declaration (SASS):
#font-face
font-family: 'Boundless'
src: asset-url('boundless.ttf', font) format('truetype')
font-weight: normal
font-style: normal
The following HTML works (it renders the desired icon character in Mobile Safari on iOS 5.1:
<h1></h1>
However, I see a <?> glyph if I try to render it in the way that Font-Awesome does:
SASS
i.bicon-biology:before
font-family: "Boundless"
content: "\f0000"
HTML
<h1><i class="bicon-biology"></i></h1>
Yet Font-Awesome icons render fine on the site.
Does anyone know what might be causing this issue?
I should also add that I tried all the recommendations made here: #font-face not embedding on mobile Safari (iPhone/iPad) and none worked. This includes adding the smiley-face hack, making sure my font urls are absolute, and trying svg fonts (which shouldn't be neccessary for iOS 5 anyway).
Mobile Safari apparently just doesn't like the utf-8 addresses I was using (/0f0000-/0f001e).
I edited the font to move the characters to the same positions that Font-Awesome uses (/00f000...), and presto, it works!
I also checked whether adding/removing 0's padding the left made a difference, and it works either way. There's just something about the other address range. :\
AGAIN: This is only an issue when the codes are used in pseudo element content. As you see above, (and ) rendered just fine when it was directly in the HTML.
I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.
When I design in Photoshop, my fonts are thin and crisp, but when I declare fonts in CSS -- even when using font-weight: lighter -- the fonts always appear bolder.
Maybe this is just how the browser renders the font (In IE fonts stay thin), but I was wondering if there were any tricks or tips for achieving the same thin, crisp looks.
Use CSS to smooth up your fonts...
put this in your CSS:
-webkit-font-smoothing: antialiased;
Font rendering can be complicated. Unfortunately, different browsers will render the same font differently.
As far as CSS goes, setting font-weight:100 ensures the lightest available weight will be used. You may also want to set -webkit-font-smoothing:antialiased.
<style type="text/css">
body {
font-family:"Helvetica Neue", Arial, sans-serif;
font-weight:100;
-webkit-font-smoothing:antialiased;
}
</style>
Helvetica Neue is a very thin font native to OSX.
Your best bet is really http://www.google.com/fonts/
Also noteworthy:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.
A bit more info here:
Browser Choice vs Font Rendering | Phinney on Fonts
I don't believe any one of the universal web fonts has a very thin weight in all browsers. However, there ways of embedding custom fonts in all major browsers now 'days.
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
Any of these tools can get you just about any kind of font you can imagine. Just be careful with copyrights on the last one.