Making a Latin font smaller than Hebrew (unicode-range) - css

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.

Related

Adjust dash, ndash and mdash length in the font

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>

using unicode_range to exclude numbers only

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.

Secondary fonts for Chinese characters

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/

Fallback fonts on special characters

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.

Different font showing up in Mac and Windows

I've flex application and am using arial font family. My problem is, arial fonts are shown up in windows while on Mac, it's been replaced with Times New Roman. (Arial font is there on both systems).
What can be the problem??
If I were you, I would embed the font in your application instead because you never know if the user have the font on his computer. Moreover, when using system fonts, the rendering can be somewhat different between a PC and a Mac
PeZ is exactly correct. You can find information about how to do it here, but I commented because I wanted to reinforce an additional pitfall of embedding fonts.
First, it will make the size of your SWF increase quite a bit, because it creates outlines of every single character in the font set you use. To resolve this, you should limit down what characters are actually embedded - if possible. You can learn more about ranges here.
Also, remember that you need to embed bold and italics as well if you are using them in your application.
In other words, something like this:
#font-face {
src: url("/style/MyriadNormal.ttf") ;
fontFamily: Myriad;
fontWeight: normal;
unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}
#font-face {
src: url("/style/MyriadBold.ttf") ;
fontFamily: Myriad;
fontWeight: bold;
unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}
Remember that every version of a font you embed will increase the SWF size as well - so if you embed a normal, bold, and italic font you triple up the size.

Resources