I'm using the "Quicksand" font for a web project (http://www.google.com/fonts/specimen/Quicksand) and I've a problem : the ² character doesn't exist for that font. I thought that it would be rendered in other fonts (written after Quicksand in the font-family property), but it is not. When I write ², the only thing rendered is a white space.
Is there a way to render not supported characters by other fonts ?
Here's the CSS used :
font-family: "Quicksand", Helvetica, Arial, sans-serif;
There is a bug in the Quicksand font: for the Unicode code position U+00B2, SUPERSCRIPT TWO, it has an empty glyph. It is 396 units wide, so it is wider than a normal SPACE (300 units) in the font. Another character with a similar problem is U+201A SINGLE LOW-9 QUOTATION MARK “‚”, which has an empty glyph 230 units wide.
In principle, you could circumvent the bug by using unicode-range in a #font-face rule to specify that a particular character be taken from a different font. However, browser support is still too limited (and the approach would require that you host the font files instead of using them from the Google server).
Another possibility would be to edit the font. This requires a font editor and a permission from the copyright holder (and your hosting the font files of course).
A third option is to wrap each occurrence of “²” in a span element with a class and setting font-family on them suitably. Beware that this means mixing glyphs from different fonts, which should be avoided in good typography.
Finally, consider using a different font. There are several questions about rendering problems with the Quicksand font at SO.
Related
in my web project I need to mix latin and cyrillic characters. Unfortunately the cyrillic characters are not part of the webfont, thus the fallback steps in.
As I use a bold webfont the latin characters are bold but the fallback would only be bold, if I set the whole paragraph as font-weight:bold or alike.
I remember discussions that this should be prevented as some browsers can't display them correctly, but during my tests I wasn't able to produce a really broken layout when bolding the webfonts.
What do you think? How can I solve this problem?
Thank you
Markus
Yes, most webfonts provide specific weights like 400 for Regular and 700 for bold. If these aren't provided and you bold/strong them, you are in essence using the font outside of its original intent.
Font weight values can be used, but I'd always stick with the ones provided with the webfont you're using.
Also, if a weight you declare is not available, it will not show on the page but simply default the "logically closest" (this from the CSS Tricks article below) weight.
See a little more basic description here: https://css-tricks.com/almanac/properties/f/font-weight/
Yes it's still recommended you don't do this.
By using font-weight:bold you're forcing the browser to try and create the bold version of this font itself, which can often look distorted / fuzzy. This is referred to as faux styling.
You should set different #font-face definitions with different font-weight values which make use of multiple font files.
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
As a native Bānglā (Language: Bengali) writer, we are dependent on to Unicode Bānglā characters. As we all know Unicode is an extended version of ASCII, and all the ASCII characters are still preserved in Unicode. And the rest of the World glyphs were added then. Now in Bānglā and other languages' concern (it can be Chinese, Hebrew, Japanese or Javanese), we have glyphs on Unicode.
But in Bānglā's concern the font-size: 100% for English characters is not enough for Bānglā characters. Because of the glyphs' position inside every grid. The thing can be understood by the following image:
While English character is largely fit in a grid, the Bānglā character is shrinked to fit within because of other supporting vowel-sign-glyphs.
Hence, while we put body{font-size: 100%} it's nice for English glyphs, but with the same CSS shows the Bānglā fonts smaller.
SOLUTION, NOW
At present, how we do solution for that, is to choose a nice font that has both good English and Bānglā glyphs, i.e. "Siyam Rupali". So that, it solves the matter a very little.
NEW THOUGHT
But what I'm thinking is a bit new:
» Why not we target the Unicode glyphs and put some specific CSS for only those?
Suppose the Unicode serial number #0048 4614 5784 4578 represents the first Bānglā character and #0048 4614 5784 9999 represents the last. So, if we can do some CSS like:
Unicode[glyph="0048461457844578" - "0048461457849999"]{
font-size: 150%;
}
I know nothing like the above is present in CSS. But, is there a way we can target specific glyphs to pose different CSS styles onto 'em?
If there's a way then many of the Bānglā Unicode users will be benefited, especially a large portion of Online Bānglā Newspapers need such a tweak over content to achieve dynamic control.
This is entirely a problem of fonts. If you choose a well balanced font in which glyph sizes are adjusted in a way that mixed language text looks good together, there's no real problem. CSS can help you here in so far as you can specify custom fonts for certain characters using #font-face:
#font-face {
font-family: 'bangla';
src: url('http://example.com/mybangla.ttf');
unicode-range: U+0980-09FF;
}
This fictional "bangla" font now applies only to the Unicode range U+0980 - U+09FF, which is the Bengali block. Choose some fonts wisely and you can create a well balanced appearance in modern browsers.
I'd like to set different line-height for different fonts from a list fall-back fonts. For example:
body {
font-family: "Small x-height font", "Larger x-height font", sans-serif;
}
When the preferred Small x-height font is used, I'd like to set line-height to 1.3. When Larger x-height font is used because the preferred font is not available, I'd like to set line-height to 1.5. When both fonts are not available and the sans-serif fallback is used, I'd like to set line-height to normal.
Is this possible using CSS 2.1 or CSS 3 without resorting to JavaScript?
Rationale The problem is that different fonts have different x-height (the height of lowercase letters such as x relative to the font size). To make text with larger x-height look good, it must be set with a larger line height. The x-height of the default fonts (sans-serif in the example above) is unknown and may differ drastically from the x-height of the font of our choice. So a line height that looks good with our font may look ugly when the font failed to load.
I don't believe there is a way to do this in the exact way you are requesting.
However, I can tell you that if you are using a font service (eg Typekit), you may be able to style fallback fonts depending on whether the font has been loaded or not.
In Typekit's case, they add classes to the element when the font is loading, loaded, or inactive. They also provide classes for the specific fonts/weights.
You can then provide specific styling depending on the situation.
Here's a rough example:
body {
font: 400 16px/1.5 "typekit-font", "fallback-font";
}
.wf-inactive body {
font-weight: normal;
line-height: 1.8;
}
More information can be found in their corresponding help article.
There is a font-size-adjust property in CSS3 which addresses this problem. You can specify font-size-adjust: 0.6 for your body and all fonts will be transparently scaled to have the x-height of 0.6em. This has the additional benefit that you can combine fonts with different original x-height on the same line and they will have roughly the same lowercase letter size without the need to adjust font sizes manually.
Only Firefox implements font-size-adjust (as of November 2012). WebKit does not.
See the CSS3 Fonts specification for more information and David Baron's post for some examples.
In CSS, you cannot make the value of a property depend on the choice of a font. Basically, properties are independent of each other, with some exceptions that do not apply here.
Normally, fonts in a font-family list should be more or less similar in general characteristics. It’s not just a line-height matter. The choice of a font affects the page as a whole.
A different strategy is to use a downloadable font via #font-face. Then you can be reasonably sure that your font will be used, and you can set line height and other properties according to it.
According to sitepoint (a source I typically highly trust) when specifying font-family names some Operating Systems/Browsers may be case-sensitive.
I've typically always used mixed-case values but I'm wondering if lower-case values will work just the same?
I don't have an overwhelming preference either way - but I'd hate for a page to render differently because I typed a lower-case "v" vs. "V" somewhere in a CSS file.
e.g. are there any known cases where 2 divs with the foo and bar classes below would actually render with a different font?
div.foo{
font-family:Verdana, Arial, Helvetica;
}
div.bar{
font-family:verdana, arial, helvetica;
}
Although the CSS syntax overview says
The following rules always hold:
All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.
The css3-fonts module section mandates case-insensitive comparison:
For other family names, the user agent attempts to find the family name among fonts defined via #font-face rules and then among available system fonts, matching names with a case-insensitive comparison.
so the CSS3 specification requires that font-names be treated case-insensitively.
This guy seems to have problems when using flex, so there seems to be some truth to this:
When using CSS in Flex to style
components, the font-family property
can be case sensitive on some
operating systems. For example, the
following CSS will not work on my
Safari browser with Flash Player 10:
.content{font-family: arial;}
but this will work:
.content{font-family: Arial;}
Source
Also take a look at this page that you can use to check this in your own browsers/os:
http://meyerweb.com/eric/css/tests/font-name-case-test.html
My guess is that this would only be a potential problem on Linux/Unix systems, where the file system is case sensitive. I'd be surprised if any Windows browser had a problem with this, since fonts are just files in the C:\Windows\Fonts directory.
You could try making a page with test text in a recognizable font like Courier New, but spell it funny like "CoUrIEr nEW", then go to http://browsershots.org/ where it will generate screenshots from tons of browsers. Be sure to make the font very large too, because the screenshots are small.
Something like this:
<html>
<head>
<style type="text/css">
#proper { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>
If only one line shows up in Courier, then that browser is case sensitive.
Edit: I tested the HTML I posted above in browsershots. I didn't find any browser that didn't work. Dillo 2.1.1 for Ubuntu Linux didn't like either line (maybe that system lacked both Courier New and Courier?), all others showed both lines in Courier or Courier New. There are still mobile browsers that were not tested, though, so you should strive to use proper capitalization just in case.
A nice question indeed. I personally have not heard of any issues that have something to do with case sensitivity.
What you should worry about more is about the presence of these fonts on various systems. Verdana and Arial are not available on Mac. Helvetica is not available on Windows. You have defined two sets with zero intersection area in the Win/Mac dimensions.