I'm using "Noto Serif" font for normal text, and it is working fine. The Google Fonts URL is https://fonts.googleapis.com/css?family=Noto+Serif
However, that font face request does not return references for all the characters actually supported by "Noto Serif". It returns only latin, cyrillic, greek, and vietnamese subsets.
If I add the infinity symbol ("∞", U+221E) to the text, it gets displayed by a fallback font, even though "Noto Serif" does have a glyph for that character.
I tried to enforce a subset. I'm not sure what is the subset that would include "∞", maybe "math", if Google Fonts have such. However, the public API does not seem to support "subset" parameter (anymore?), and it seems to have no effect on the font request.
I see that a JSON API call with some access key supposedly supports parameter "subset". Is that the only way, if it even works for such case?
There is also an API parameter "text". https://fonts.googleapis.com/css?family=Noto+Serif&text=∞ does in fact return the "∞" glyph, however it returns nothing else. Is there a way to still return all the default characters and, in addition, also this "text" character?
I cannot just do both font requests, because the text one does not have unicode-range parameter, so they would override each other.
I could add manual #font-face CSS definition, but that would void the Google Fonts dynamic benefits of serving different replies to different browsers in a way they would understand best.
I could list all the characters in the text parameter... Resulting in a big query to get the font, and maybe miss some characters.
I could download the TTF font and host it locally, but that would void the benefits of not loading all the font files, containing a lot of glyphs that will never be used.
What is the best way to do this?
It turned out that loading the same font a second time doesn't actually override the first one, the browsers seem to be smart and merge them all right.
So, the solution I used is:
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght#0,400;0,700;1,400;1,700&display=block" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght#0,400;0,700;1,400;1,700&display=block&text=%E2%88%9E" rel="stylesheet">
At first, load all the usual characters Google Fonts give you by default, and then load the font a second time and request specific characters in text parameter.
Of course, this works nicely only if you don't have too many of those extra characters that are needed...
Related
How does a web browser handle the case when a given glyph, character, symbol, dingbat, etc is missing from a font ? You can for example declare fonts in your CSS that don't include the font maker recreating: Unicode Character “⌚” (U+231A) yet it will still render. How does the browser make the decision itself?
So the font matching algorithm is relatively complex so I don't want summarize it incorrectly. But basically after it goes through the fonts mentioned in your CSS and none of them work it goes to a user agent defined system font fallback procedure. There is no spec or standard for this, so it is going to be browser / user agent specific.
https://www.w3.org/TR/css-fonts-3/
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.
I recently bought a font and wanted to embed it into my website using web fonts.
Now the problem is: After buying it, I realized that the font is missing the umlauts, such as ä, ü and ö, so it shows an empty space instead of the (missing) character.
Is there a way to prevent this? Like tell the css to use another font for the missing characters? Or would I have to edit the font itself?
Because there is no "easy", or clean way around this except remodeling the font files, here's a small JS script to replace extended ASCII chars with a <span>. (One could only do this for the exact, required characters, but you'll propably end up asking yourself the same question again once you accidentally come across another character that's not supported.)
JS only on example text:
"Hêllo wörld. ÄÖÜßäöü".replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')
Result:
H<span class="arial">ê</span>llo w<span class="arial">ö</span>rld. <span class="arial">Ä</span><span class="arial">Ö</span><span class="arial">Ü</span><span class="arial">ß</span><span class="arial">ä</span><span class="arial">ö</span><span class="arial">ü</span>
jQuery:
$('.webfont').each(function(){
this.innerHTML = this.innerHTML.replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')
});
The nodes with .webfont should only contain text, although it should also work in most other cases.
There is no acceptable way to prevent this. Use a different font. (It is possible that there is an extended version, with higher fee, of the font you bought.) The font should be selected so that it contains all characters, at least all letters, that you may need in the text.
It is possible to use different fonts for different letters in a word, using various techniques (#font-face with range settings being the most elegant, but with limited browser support). However, it means a typographic disaster. Especially if the text contains e.g. both “ü” and “u”, there is usually a striking mismatch.
Editing the font itself is technically possible using a font editor, but normally illegal unless permitted in the font license or in exemptions to copyright in applicable legislation.
How does the font-family property work in CSS? Why is more than one font used? Isn't only one font used at a time by the browser?
The font-family property holds several font names to provide a "fallback" system.
The browser tries each font family in the order that they are listed; if the browser does not support the first font, it tries the next font, and so on, down the list. That's why it's important that at least the last font in the list be a generic font family that is guaranteed to be universally available. There is no guarantee that the fonts you have loaded on your computer when you design the web page will be loaded on your visitor's computers—fonts are generally handled client-side, rather than server-side.
A common declaration might look like this:
font-family:Georgia,"Times New Roman",serif;
The "Georgia" font will be used if it is available. If not, the browser will attempt to fall back to "Times New Roman". If it can't find that font either, it will use a generic serif font.
For more technical information, I suggest reading the Fonts specification from the W3C.
To expand on what cody said:
When you look at a web page through a browser, your browser looks at the css and sees what fonts to use. Then it checks this list against the list of fonts that your computer has installed; the first one that matches is the one that gets used. Fonts are client-side, not server-side, and if you don't have the font that the css specifies, your browser falls back either to the next font specified or a default font.