I have some Japanese characters within an html in English, and no possibility of a specific markup within the text. The font used for the text, Cinzel (a Google font), seems to have no Japanese glyphs.
So, with a rule such as
font-family: Cinzel,serif;
I would expect that the English text is typeset with Cinzel, and the Japanese characters with a generic serif font. But in fact it doesn't happen: Japanese characters show in sans-serif.
A possible solution would be to use unicode-range: within a #font-face rule. But I'd like first to understand the reason of such a behavior, and if there is a simpler way.
EDIT: I add an example for more clarity.
With
<p style="font-family: Cinzel,serif;">Some Latin characters, and some Japanese: この訳語に関しては</p>
I have Latin characters correctly in Cinzel; yet, Japanese characters are not in serif font, even if afik they are not present in Cinzel font (see this image).
The Japanese characters in true serif font, i.e
<p style="font-family: serif;">この訳語に関しては</p>
look like in this image
Related
The goal is to remove the bold letters from fl and fi in the text
chrome 61
I was able to reproduce the issue in this codepen:
https://codepen.io/jossnaz/pen/vWgEGB
basically fira sans not applying any letter-spacing to the chars and they chars are bold. No idea why.
this is how it looks on firefox 56:
There is a CSS attribute designed for controlling how ligatures are generated automatically by browsers.
Try adding:
font-variant-ligatures: none;
to your paragraph element.
See this codepen: https://codepen.io/jossnaz/pen/vWgEGB
For the issue where you want to control character spacing, and your source text is composed like "truffle shuffle" with separate F and L characters, this will prevent the browser from generating ligatures and apply spacing as you'd probably expect.
However, this is not the only issue you are running into in your site!
In your page, the text is actually using the Unicode fi and fl ligature characters (U+FB01 and U+FB02). The browser will not separate these back into separate characters, and they are not included by the Google Fonts API. This is possibly some plugin in your CMS automatically converting ligatures, or perhaps the result of copying and pasting from an editor.
See: https://codepen.io/anon/pen/mqmLLZ for an example of this.
These ligature characters are not included in the webfont - the Latin ligatures are at U+FB00-FB06 and either the font or Google's Font API doesn't include them.
As a result, they are switching to the fallback font, which in this case is specified as the generic sans-serif - probably Arial or Helvetica.
They're not bold per se, but they're heavier than Fira Sans.
I am using custom wordpress theme and I wanted to change the font. To do that I found the style.css file, and then replaced the current #font-face code with mine, so that I can use the "Stylo" font. This is the code I am using:
#font-face {
font-family: 'stylo_bold';
src:url("stylo_.eot?") format("eot"),url("stylo_.woff") format("woff"),url("stylo_.ttf") format("truetype"),url("stylo_.svg#Stylo-Bold") format("svg");
font-weight:normal;
font-style:normal;
It works fine, except that when I type on cyrillic the font doesn't work and instead the cyrillic text is showed in some default font (Myrad Pro or something). This font has support for the cyrillic letters, so can you point me in the right direction here? I don't understand why it doesn't work? Thank you.
You answered your own question.
This font has support for the cyrillic letters...
Many fonts only support english language. A lot of websites will show you a character breakdown or specifically list support for cyrillic alphabet. You must be mistaken or be misinformed in regard to the font in question.
I'm not sure what else to blame... But I've tried everything, including reconverting original tff to web fonts using squirrel converter.
The font in question is this: http://www.fonts2u.com/bolnisi.font
The description it says: Unicode BMP only whatever this means :)
On the demo, I see that text in html had been entered in latin characters.
When I use Georgian utf letters: ქართული. This font never applies!
Example: http://mac.idev.ge:800/breakmedia/ Look at the header, only numbers are transformed into this font. Rest is normal serif.
CSS:
#font-face {
font-family: 'bolnisiregular';
src: url('font/bolnisi-webfont.eot');
src: url('font/bolnisi-webfont.eot?#iefix') format('embedded-opentype'),
url('font/bolnisi-webfont.woff') format('woff'),
url('font/bolnisi-webfont.ttf') format('truetype'),
url('font/bolnisi-webfont.svg#bolnisiregular') format('svg');
font-weight: normal;
font-style: normal;
}
html *
{
font-family: 'bolnisiregular' !important;
}
What is happening here? any ideas?
That's a typical "hack" font. As you can see on the font page you link to, the glyphs are not at the character code they're supposed to belong to. The glyph at the code point for "i" is "ი". That's not the correct glyph for "i". The glyph for "i" is supposed look like "i". The glyph "ი" belongs at code point U+10D8, the code point for the Georgian letter "IN".
Such font hacks are/were used before the code points for that language became officially ratified in the Unicode standard, and/or for software in that language which does not (yet) support Unicode. I.e., sometime in the dark ages there existed no official encoding for the Georgian language, yet people in Georgia wanted to see Georgian glyphs on their screens. So arbitrary ASCII code points were overloaded with Georgian glyphs. Strictly speaking, that font is broken.
This specific font has Latin letters only which you can see in Character map section below the example text on fonts2u.com.
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 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.