I was wondering if it's possible to, when using #font-face, have a fallback setup so that if the text on my page contains characters that are not accounted for within the font (Japanese characters for example), only those characters are presented in a basic font and every other character remains as the custom font?
I'm imagining that potentially there'd be a mix of two fonts within one paragraph on occasion.
What you described is the default behaviour of a browser - it should naturally fall back to basic font for missing characters.
However, sometimes custom fonts use blank characters, in that case you can try using the unicode-range
For example:
#font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF;
}
Taken from this interesting article: Creating Custom Font Stacks with Unicode-Range
Unfortunatelly there are browser support issues.
CSS has default fallback to the system font if the specified font doesn't contain a character.
You can also specify which font to fall back to.
Example for a serif font:
body {
font-family: "MyNiceFontWithoutJapanesChars", "common serif font", serif;
}
As long as the fallback font has those characters your default font misses, you should be all right.
Related
I'm using the Roboto Family of fonts. In general, it fits perfectly to all my needs except one. The length difference between ndash and mdash is to small. It is a very important aspect, because as a part of our services - we are helping editors, proofreaders, writers and typeseters.
To fix the issue, we adjusted the font and we hosted it on our server. Unfortunatly, this has an significant impact on page loading and rendering speed (even the preloading the font is done).
I would like to switch into CDNJS version of the Roboto font and I'm wondering if there is a CSS or CSS+JS way to fix the issue. The idea is to select all the ndashes on the site and to shorten all of them with either JS or CSS, to be exactly in the middle of the length between dash and mdash. In the origin Roboto font ndash is twice so long as dash but mdash is just a little bit longer than ndash.
An alternative is, to replace all the ndashes with an ndash from another font.
Any other ideas?
You mention replacing the ndashes and mdashes from another font.
Have you considered using the CSS font-face unicode-range property?
If you have a font that has the sort of size dashes you want you could substitute those for the dashes in Roboto.
I couldn't immediately find a font that had sufficiently different dashes to the standard ones to demonstrate, but here's the code from MDN which substitutes the ampersand in Helvetica with the slightly more flamboyant one from Times New Roman. This method saves having to do anything to your actual text.
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;/* 2013-2014 ndash and mdash */
}
div {
font-size: 4em;
font-family: Ampersand, Helvetica, sans-serif;
}
<div>Me & You = Us</div>
I have a Hebrew/English site that uses two fonts added with #font-face.
Using unicode-range I've defined one font to apply only at Hebrew chars and another to apply to all other chars.
The problem is in the fact that my Hebrew font has characters that look noticeably smaller than the ones in the Latin font.
The easy solution would be to replace one of the fonts and find some other which has chars of a similar size. But unfortunately, I have to keep those two fonts. Can't change them.
So my question is. Is there a way to e.g. define that all chars in Latin unicode-range should have a font-size of 0.8em?
Keep in mind that an element might contain both Hebrew and Latin chars at the same time. So a solution with setting a different class based on the entire site's language would not work. It would really have to be defined on the "per-char" level.
Edit: per request in comment I'm adding a code example:
/* --- --- --- Defining font: --- --- --- */
#font-face {
font-family: HebrewFontName;
src: local('HebrewFontName'),
local('HebrewFontName'),
url(/fonts/HebrewFontName.otf);
font-weight: 300;
unicode-range: U+0590-05FF,
U+0030-0039;
}
#font-face {
font-family: HelveticaNeue;
src: url(/fonts/HelveticaNeueDeskUI-01.ttf);
font-weight: 400;
}
/* --- --- --- Using font: --- --- --- */
.someElement {
font-family: 'MigdalRegular', 'HelveticaNeue';
}
You can't currently.
The unicode-range property is intended for determining either to download a font or not. It doesn't filter the character range to apply the font to.
... If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.
The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth.
–– MDN unicode-range
Your best bet is to use different font for different language segment: by inserting span on the segments.
I'm using a custom font and loading it through #font-face. The text looks fine, but the numbers look screwy (only on chrome-windows, which is a very well know bug. And yes, I tried using the svg format for chrome, which solved the numbers but screwed the text). I decided to limit my own font to only [a-z][A-Z], and using this generator got this:
unicode-range: U+0041-U+005a, U+0061-U+007a;
And it seems to... not be working. Numbers are still being displayed using the font. How do I find the right range to use\some other solution? I'd love for a general solution, for example if I want to limit future fonts as well.
Thanks in advance!
P.s.
While I'm on the subject - I'm assuming there's no way to load the same font twice - using the .svg file for numbers and .otf for text, right? Because if possible that'd be awesome as well.
You can use #font-face rules to specify that a font family name (which is up to you to decide) is mapped to a specific font except for some character range, for which another font is used. This even works for local fonts, e.g. as follows:
<style>
#font-face {
font-family: foo;
src: local("Times New Roman");
}
#font-face {
font-family: foo;
src: local("Arial");
unicode-range: U+0030-0039;
}
p { font-family: foo }
</style>
<p>hello 123</p>
On supporting browsers, “hello” appears in Times New Roman (if available) but “123” in Arial (if available); the range U+0030-0039 is the common European digits 0 to 9.
You can use similar techniques for downloadable fonts.
The bad news is that unicode-range is not supported by Firefox or by IE 8 or earlier. They fail differently: for the code above, IE 8 uses Times New Roman, ignoring the latter #font-face rule, whereas current Firefox uses Arial, as if the unicode-range restriction were not there.
Finally, I used a "brute-force" method. Using Font Squirrel's webfont generator I recreated my font files, and using the advanced options > custom subsetting, I completely removed the numbers from the font.
Seems like a terrible solution, but the best I could find.
Is there any way in CSS to specify a different font to be used just for Chinese characters?
Specifically, I have some user inputted text which can contain either standard English, Han characters or a mix of both. I'd like to use Myriad Pro for non-Han characters, and Kaiti Std for all Han characters.
I realize this can be done by running over the content with JavaScript, adding span tags around the Chinese characters and then applying styles to them, but is there any more standard/efficient way?
I don't care about old browsers, although it should work in the latest version of Chrome/Firefox/Safari/IE.
You can specify a unicode-range for font-faces so that that each font only applies to a subset of unicode characters.
http://dev.w3.org/csswg/css-fonts/#composite-fonts
A very basic implementation would look something like (adjust for font files and formats as needed):
#font-face {
font-family: 'MyFonts';
src: local('Kaiti Std');
unicode-range: U+4E00-9FFF;
}
#font-face {
font-family: 'MyFonts';
src: local('Myriad Pro');
}
body {
font-family: 'MyFonts', sans-serif;
}
Some interesting browser quirks/work-arounds documented at http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/
I have embedded fonts to my webpage and randomly in the divs i use font-style = italic and font-weight=700.
My #font-face rule is:
#font-face {
font-family: 'Arimo';
src: url('fonts/arimo_bold_italic.eot');
src: url('fonts/arimo_bold_italic.eot?#iefix') format('embedded-opentype'),url('fonts/arimo_bold_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Though the font-style and font-weight additions are working fine on all the browsers, it does not seem to work on Safari 3.2 giving weird results like the style and weight being applied only sometimes at random.
Any solution?
You are specifying the typeface as normal weight, regular (not italic). This is possible and often used to overcome some browser limitations, and it is also the way FontSquirrel uses in the CSS files it generates. But is has its implications.
In this case, font-family: Arimo alone produces bold italic Arimo, since this is how you have defined the name Arimo. To a browser, Arimo is just a normal-weight regular font, so if you ask, in CSS or indirectly e.g. via b or i markup, it to be used in bold face or italic, most browsers will use the font as such.
According to the CSS 2.1 font matching algorithm, when italic (or bold italic) is requested for, a regular face is not considered a match. This means that the browser should fall back to its default font, unless your rule specifies a secondary font. No browser actually does this: Safari produces “synthetic italic” by algorithmically slanting glyphs, whereas most other browsers just use the regular font (i.e., the font they regard as regular since it was declared that way). In CSS3, this is to be changed so that the behavior of most browsers becomes the norm.
So this is a messy business, and to avoid the mess, use one of these approaches:
a) Declare each font face as a family of its own, as regular and normal-weight, as you have done here, and do not apply font-weight values other than normal' orfont-stylevalues other thannormal` to text in such a font, directly or indirectly (note that many HTML elements produce italic or bold b default).
b) Declare each font face as a font in the family, with font-weight and font-style set in #font-face the logical way, and use the font family the normal way, declaring font-weight: bold when you want bold etc. This is how Google Web Fonts work, when hosted by Google.
P.S. It is odd that the `#font-face' rule does not mention a WOFF format file, which is the preferable format of downloadable fonts when a browser supports it. Generators normally produce it, too, and include it in the rule.