I’m writing a small static site (HTML and CSS) and stumbled about a behavior in the property font-family, which I don’t understand. I like to write my code consistent with a nice and clean look, that’s why always quote fonts in CSS.
As far as I understand the CSS2.2 specification correct, quoted fonts are allowed:
Font family names must either be given quoted as strings, or unquoted
as a sequence of one or more identifiers.
Unfortunately, it’s not working properly in my case. I attached an example below.
.test1
{
font-family: 'sans-serif';
}
.test2
{
font-family: 'arial';
}
.test3
{
font-family: sans-serif;
}
<h1 class="test1">Test</h1>
<h1 class="test2">Test</h1>
<h1 class="test3">Test</h1>
I tested the property with Google Chrome 54.0.2840.99 and Internet Explorer 11.0.9600.18450. Why is the quoted font for arial working but not for sans-serif?
Sans-serif is not the name of the font but the font type...
In order to make a font work, you have to type at least the font name!
Font name in required.
Ex
.myclass{font-family: 'myFontName', sans-serif;}
family-name - The name of a font-family, like "times", "courier", "arial", etc.
generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
Source
Related
Environment: Chrome v97 on Windows 10
It seems the variation selector for emoji is only respected if no font is specified, in which case OS would fallback to the correct glyph.
This is DevTools inspect on the first example (OS fallback). On "Computed" tab it shows the actual glyphs come from both "Segoe UI Emoji" (for emoji presentation) & "Segoe UI Symbol" (for text presentation) correctly.
However if I specify a font explicitly, either both text or both emoji
display, depending on the font order. No fallback to the next font in the list even if the glyphs of the other presentation are missing.
This means if I want to change the emoji font on a site, variation selector doesn't seem to work at all.
Why is that? Is there a workaround?
Sample code is attached
<style>
.emoji {
font-family: 'Segoe UI Emoji';
}
.symbol {
font-family: 'Segoe UI Symbol';
}
.symbol-emoji {
font-family: 'Segoe UI Symbol', 'Segoe UI Emoji';
}
.emoji-symbol {
font-family: 'Segoe UI Emoji', 'Segoe UI Symbol';
}
</style>
OS Fallback: <div>☹︎ ☹️</div>
Emoji: <div class="emoji">☹︎ ☹️</div>
Symbol: <div class="symbol">☹︎ ☹️</div>
Symbol emoji: <div class="symbol-emoji">☹︎ ☹️</div>
Emoji symbol: <div class="emoji-symbol">☹︎ ☹️</div>
The Segoe UI Symbol font doesn't support the variation sequences using U+FE0E, which is why you don't get the text variant in the "Emoji" case. (Segoe UI Symbol does support sequences with U+FE0F, though.)
As for the "Symbol Emoji" and "Emoji Symbol" cases, this is expecting the browser to decide on a font based on the variation sequences. Evidently Chromium doesn't handle that.
The Problem
I've made a website for myself, using the Express framework for NodeJS, and it works pretty much as I'd hoped it would.
One remaining irritation is how best to provide support for the more obscure scripts and alphabets the world has to offer.
At present, I'm using a version of the Computer Modern font, using these files specifically, which I import via CSS in the following code:
#font-face {
font-family: computerModern;
src: url("fonts/cmunrm.ttf");
}
#font-face {
font-family: computerModern;
src: url("fonts/cmunti.ttf");
font-style: italic;
}
#font-face {
font-family: computerModern;
src: url("fonts/cmunbx.ttf");
font-weight: bold;
}
#font-face {
font-family: computerModern;
src: url("fonts/cmunbi.ttf");
font-weight: bold;
font-style: italic;
}
...
body {
font-family: computerModern, serif;
padding-left: 20px;
padding-right: 20px;
}
This approach has worked quite well so far - up to a point. The Latin alphabet is printed beautifully, as are the Greek and Cyrillic alphabets. Arab text also looks pretty, although, looking through the character lists of the .ttf files, my browser must just be pulling out its default Arabic font; as luck would have it, the default Arabic font complements Computer Modern rather well. But I begin to run into more serious difficulties when I want to print, for example, people's names in their native Georgian characters, e.g. სალომე ზურაბიშვილი = Salome Zourabichvili. The correct characters are printed, but my browser's default Georgian font is hideous when side by side with Computer Modern.
Potential Solutions
How should I add support for the Georgian alphabet, and other obscure scripts, so that characters are printed in a font which dovetails with aesthetic of the rest of my website? I can think of four potential solutions, two of which I'd know how to implement but are unsatisfactory, and two of which I don't know how to implement.
Known but Unsatisfactory Solutions
Replacing the current .ttf files with files which cover all the desired characters. Unsatisfactory because I can't find such files.
Creating a new HTML tag of the span class for each obscure alphabet, any wrapping any text of that alphabet in such a tag. Unsatisfactory because the website has thousand of pages, with new ones being added all the time, and don't trust myself, let alone anyone else, to remember to use the appropriate tags.
Solutions I Don't Know How to Implement
Splicing .tff files, i.e. copying characters from a.ttf to b.ttf.
Adding characters from multiple .ttf files to one CSS font-family, and with the same font-style, font-weight, etc.
Why dont you target the html lang and load different fonts per language if needed?
Example:
html[lang=ja]>body {
font-family: 'Yu Gothic', Arial, Helvetica, sans-serif;
}
html[lang=ko]>body {
font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
}
html[lang=zh]>body {
font-family: 'Noto Serif SC', Courier, Georgia, serif;
}
Regards
Note: They aren't new. Just "not supported", somehow.
I'm trying to make simple controls for a element on my website, along the lines of a simple "mute" or "not mute" control.
However, I haven't been able to find any fonts capable of handling the newer Unicode symbols, such as the speaker symbols (🔇 to 🔊, or 🔇 to 🔊) which are broken (🔇 🔈 🔉 🔊) even on Stack Overflow, yet still - They can be found in the Unicode character listings and are somehow able to be displayed in my PDF reader and Internet Explorer, but not Chrome.
This is the first paragraph (above), from my perspective, with the characters broken:
Anyway, here's my snippit of the code. (The video controls are in plain view for testing purposes). The actual element has a z-index: -1000 attached to it; used as a video background.
function mute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:unmute()");
document.getElementById("jsControl").innerHTML = "🔈";
document.getElementById("videoPlayer").volume = 0.0
};
function unmute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
document.getElementById("jsControl").innerHTML = "🔊";
document.getElementById("videoPlayer").volume = 1.0
};
<html>
<head>
<style>
body {
font-family: [Insert font names and attempts];
}
</style>
</head>
<body>
<video id="videoPlayer" src="..."></video>
<a id="jsControl" href="javascript:unmute()">🔈</a>
</body>
</html>
I've tried different web-safe fonts, such as Arial, Times New Roman and Tahoma and Sergoe UI.
Question: Is there any font that can be used that supports those unicode characters that works on Chrome?
(Even a font that has these remapped onto regular letters like Wingdings will be accepted as they can be attached using #font-face { ... }.)
Also, please don't complain about the broken Javascript (if it is not written correctly) - I can fix that myself. It's the font; text (missing symbols) that I'm worried about.
Update: Viewing the icons in Internet Explorer works fine. Seems to be a chrome-and/or-other-browser sort of issue.
Since you would use just a few symbols in a special context, rather than as text characters, the practical choice is to use images.
However, if you really want to use characters, there is a very limited set of fonts to consider. According to fileformat.info, U+1F507 is supported only by Quivira, Symbola, Segoe UI Symbol, and Segoe UI Emoji. The latter two are proprietary fonts, available only in relative new versions of Windows, and as different variants (e.g., my Windows 7 lacks Segoe UI Emoji and has a variant of Segoe UI Symbol that lacks the character).
Thus, the only way that works reasonably is to use either Quivira or Symbola as a downloadable font, via #font-face. As they are rather large fonts, and you would need to serve them in different font formats for cross-browser functionality, this approach is hardly a practical option (unless you have many other special characters, possibly used in text, that also need such special fonts).
You shouldn't assume the person viewing your site has necessary fonts installed. Instead, you should add an external font. Find a font that has an appropriate licence and contains the required symbols (for example http://emojisymbols.com/), and add it to CSS as with #font-face declaration:
/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
#font-face {
font-family: "EmojiSymbols";
src: url('EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
}
.controlIcon {
font-family: "EmojiSymbols";
}
I am using a custom font face for the Hebrew language on a site and I am missing the whole set of English characters a-b, A-Z.
Right now I use the font (reformaregular) on the body tag:
body { font-family: 'reformaregular', Arial, Halvetica, sans-serif; }
English characters come up in the system default of a serif font Times New Roman on windows:
Notice the English serif at the bottom and custom hebrew font at the top.
Aside from tagging everything with a custom .en class;
My question is how do I add a fallback for the English font?
Actually if I understand your question right you can by using css unicode-range
see #font-face/unicode-range at: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/unicode-range
and a quick example:
#font-face {
font-family: Almoni;
src: url(Almoni.ttf);
unicode-range: U+0590-05FF;
}
#font-face {
font-family: CoolOtherLanguageFont;
src: url(CoolOtherLanguageFont.ttf);
unicode-range: U+0370-03FF, U+1F00-1FFF;
}
body {
font-family: Almoni, CoolOtherLanguageFont, Helvetica;
}
You can't have different font for different languages. If your Hebrew font does not have English character set (or digits for example) than you are out of luck. The only way we found was to run a javascript that detects non-Hebrew charset and adds an .english or lang attribute to the text with the correct English font.
I am trying to use a Google web font as a substitute font. But instead of being a substitute font, it is acting as a primary font.
In my , I have it linked to the font:
<link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>
In my CSS, I have variations of the Copperplate font and I know it works on my PC and I have some of them installed. This part is at the beginning of my CSS:
.class{
font-size: 24pt;
font-family: Copperplate Gothic Bold, Copperplate Gothic Light, Copperplate, Balthazar;
}
But even though Balthazar is the last font, it is coming up as the first. Ho wo I fix ths?
font-family degradation appears to work just fine with Google font in all three of their import scenarios (#import, <link>, or JavaScript).
See this example: http://jsfiddle.net/awRQm/
The most likely cause is that it really is falling back to Balthazar.
For multi-word font names, it's best to wrap them in single quotes like so:
.class{ font-size: 24pt; font-family: 'Copperplate Gothic Bold', 'Copperplate Gothic Light', Copperplate, Balthazar; }
According to the CSS 2.1 spec:
"if a sequence of identifiers is given as a font family name, the
computed value is the name converted to a string by joining all the
identifiers in the sequence by single spaces"
Fonts that have spaces in the name must be put in quotations in order to be read properly by css, this also goes for google web fonts, just to be on the safe side.
Example: font:family: "Copperplate Gothic Bold", "Copperplate Gothic Light", Copperplate, "Balthazar";