I'm using the Google webfonts API to embed Droid Sans on a page. All is fine, except for the descenders (i.e. the dangly bits on y, g, etc). The latest versions of Firefox, IE and Chrome on my Windows Vista box are all cutting the bottom off.
<!DOCTYPE html>
<html>
<head>
<title>Droid sans descender test</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
<style type="text/css">
body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
h1, h2, h3 { margin: 1em 0; font-weight: normal; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1em; }
</style>
</head>
<body>
<h1>A bug ran under the carpet anyway</h1>
<h2>A bug ran under the carpet anyway</h2>
<h3>A bug ran under the carpet anyway</h3>
</body>
</html>
The above code looks like this:
(source: thinkdrastic.net)
I've tried line-height, font-size, padding etc to no avail. I had some success with font-size-adjust, but the last time I checked it was Gecko only. Does anybody know of a fix for this?
With some help from #adamliptrot, I discovered that Droid Sans' descenders are absolutely fine at a few precise pixel sizes: 18, 22 and 27px. I adjusted my em's accordingly:
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
Not ideal, but it works:
(source: thinkdrastic.net)
Although your question is in relation to the Google Web Fonts API, the principle of my answer beneath is the same.
If the descendants are being cut-off when serving a TrueType Font, the most likely cause is that OS/2 metrics are incorrectly set (negatively) on the font.
The values that may need adjustment are WinAscent & WinDescent.
A quick and dirty fix would be to adjust these both to 0.
This can be done using Font Forge. Once the font is opened in FontForge, you can gain access to these parameters via the 'Font Info' dialogue.
I have checked the referenced ttf files, and even in windows font viewer the descenders are being cut. Seems more of an issue with the font being served rather than with your styles.
If you're using Font Squirrel, it seems the issue with the sans variant has been sorted, but the issue remains with Font Squirrel's serif variant.
For a fix for the serif variant, go to the Web Font Generator and load the font files you need (do not rely on the package they provide).
Click the 'Expert' radio button, leave all of the settings but under 'Advanced Options' change the 'Em Square Value' to '2162' and generate the font.
This renders the font properly at all sizes
we've been having the same problem...we tried using font squirrel. we tried using google web fonts. The font kept cutting off "hanging" letters like g. Also, the google hosted version did not appear as true and clear as the other ones. The font seemed a bit choppy.
Our solution:
We hosted the font ourselves without formatting it for the web. Then we converted the ttf file to an svg, .eot, and .otf, and uploaded those as our fixes for ie and mozilla etc.
If the tip at the top - changing font-size to....
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
doesn't work for you, then add "line-height" to the element that is cutting off the descenders. ``
I'm just guessing here, but I've had the same problem occur when fonts get substituted. I just wonder if this occurs when say a font substitution replaces a 1024em font with a 1000em font or vice-versa. I had some major descender cut-off using a 2048em font. Might be worth investigating.
I had a similar dilemma and the line-height fix worked for me (i.e. I added this code to the Custom CSS section):
h2 { line-height: 140%; }
Related
I'm writing a tiny website for a book that's currently being printed, and want to match the slightly eccentric font called Cronos Pro which it uses for its headings. I'm currently doing this with the following CSS:
header, h1, h2, h3 {
font-family: cronos-pro, sans-serif;
}
Cronos Pro is supplied using our Adobe Creative Cloud subscription, and under the terms of their licence this must be loaded as follows:
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"/>
This just produces a set of #font-face rules defining the font, and it all works fine. Nevertheless, I feel I ought to keep the fall-back of sans-serif in case the font is temporarily unavailable, or for an old browser that doesn't support it.
However, Cronos Pro is a very compact font. If I know the browser is using it, I want it rendering bigger, as if I'd added font-size: 125% to the CSS. But if the browser falls back to its default sans serif font, I want it at 100% size.
I thought I could do this as follows, but Firefox tells me it's an invalid property value:
font: cronos-pro 125%, sans-serif;
Is there a good way of achieving this, bearing in mind the #font-face rule is outside of my control?
You could use JavaScript to add a stylesheet with your font-size: 125% tag if and when Chronos Pro loads successfully:
<script>
{
let font = "cronos-pro";
let styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
document.fonts.ready.then(function () {
if( document.fonts.check(`1em ${font}`) ){
styleSheet.sheet.insertRule('header, h1, h2, h3 { font-size: 125%; }')
}
});
}
</script>
Not sure if this is a "good way" to do it, but it should work in a pinch. I'm still a bit new at web development.
I have some (test) HTML like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Monospace</title>
<style>
tt { font-family: monospace; }
</style>
</head>
<body>
<h1>Test Monospace</h1>
<p>This is normal text</p>
<p><tt>This is monospaced text</tt></p>
</body>
</html>
When I display this in IE the monospace text uses Courier New instead of the font I have configured in IE. If I do nothing other than delete the <style>...</style> block, it correctly uses the configured font.
It only does this for IE, not FF or GC. IE 9 on Windows 7.
It does this regardless of where the style's configured, including a separate stylesheet or using a style attribute.
The real problem is that specifying the font-family and font-size is key to fixing the browser's problems with monospace text using the following styles:
/* monospaced sizes are horribly broken in browser default stylesheets */
code, kbd, pre, samp, tt {
font-family : monospace,monospace; /* Chrome (but note that this makes IE use "Courier New" for some strange reason, as does plain monospace.) */
font-size : 1em; /* Firefox, IE,Opera */
}
Does anyone know how to stop IE from doing this?
monospace is not a specific font familiy. Exactly like serif or sans-serif, which are generic family definitions.
font-family: monospace; just tells the browser to use the default "monospaced font", which in this case is Courier New. See also this resource.
EDIT:
If you omit the font-family rule for tt in your CSS, IE9 seems to display the custom set plain text font. Please see this fiddle: http://jsfiddle.net/sVCwd/1/
Hope this helps.
It seems that in IE, monospace means Courier New. Changing the IE settings for “plain text font” affects the default font for some elements, like tt, but it does not change the meaning of monospace. In an old discussion someone who seems to know what he says writes: “(Please, no comments about the serif and monospace fonts which can be
selected using Tools, Internet Options. They have nothing to do with the
default CSS generic fonts.)”
If you want, as an IE user, to change the meaning of monospace, I suppose you would need to find an entry in Windows registry for it (I was unable to find it in Windows 7 – could not find IEFixedFontName for example).
But if you instead just want some elements rendered in a monospace font of your preference (which is mostly the same thing as far as practical effects are considered), you could set up a user style sheet with content like
code, kbd, pre, samp, tt, xmp, listing, plaintext {
font-family: Consolas !important;
}
I used Google web fonts for my H1 text and the text looks very pixelated on my screen.
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<style media="screen" type="text/css">
h1 {
color:#544E4F;
font-family: 'Forum', cursive;
text-align:center;
margin: auto;
font-size:210%;
}
</style>
Thanks in advance!
After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:
I found http://www.fontsquirrel.com
I downloaded the (pixellated) font I was using (Exo family)
I uploaded it to my site
I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a #font-face Kit that is available at fontsquirrel.com also).
It looks OK to me. However note that h1 receives the style:
font-weight: bold;
in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.
If you want to use Forum for headings I suggest adding the rule:
font-weight: normal;
which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.
Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:
font-smooth: always;
-webkit-font-smoothing: antialiased;
although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...
Well I'm just throwing these out there, but..
My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.
Maybe try using a div instead of h1, though I doubt that would do much of anything.
Try adding this:
h1 {
text-shadow:0 0 1px transparent;
}
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.
I just started using #font-face
This is on top of my css
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
font-family:"Avenir",Helvetica;
background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
color:#321244;
}
and i have this below for a menu on joomla
#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;
this is on the html file
<li class="item23"><span>Menu Item</span></li>
This works in Firefox, but it is not working correctly on Safari or Chrome, the font is correct but the font-weight is not working, i checked on google-chrome developer tool and the computed font weight is 600.
I have tried using 100 or 900 the results on safari and chrome are the same, the font weight wont change.
Is there something wrong with my font-face declaration on top of my css file?
should i try adding something like this
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Heavy.otf);
font-style: bold;
}
I tried but didnt work.
Should i add another font this are that i have on my font directory
AJensonPro-BoldIt.otf AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf AvenirLTStd-Book.otf
AJensonPro-It.otf AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf AvenirLTStd-Roman.otf
Or should i try another font format, something that is not otf, in IE seems to be working althought the width is bigger. I still need to fix that.
As explained here, you have to add
font-weight: normal;
font-style: normal;
inside the #font-face declaration and then use the font-weight:600; on your anchor.
Specifying a numerical value for font-weight is something you do at your peril. Different browsers interpret the values differently, and some don't interpret it as anything at all. You are best going with the standard "bold" ... which browsers get closest to matching in some semi-uniform way. Also, if you are using custom typefaces you should be certain your users have them on their systems. Also, some custom fonts don't respond well to the faux "bold" property. They will have a named "bold" face, like Avenir Bold, Avenir Black, Avenir Demibold, Avenir Demibold Condensed, etc., etc., etc.
Also, always include enough fallback fonts, including, at last, the "serif" or "sans-serif" or "monospace" general font specifier.
Better late than never. Hope this helps:
html { -webkit-font-smoothing: antialiased; }