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.Your best bet is to use different font for different language segment: by inserting
span
on the segments.