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";
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
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
When I check a font in Google Fonts preview page all special chars are working as expected, but when the font is used in a web site some chars are printed with the default font.
Is there any trick to get the font working to the fullest in the browsers too?
Example here: http://codepen.io/anon/pen/yaardm
#import url('https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC');
p{font-family: 'IM Fell DW Pica SC', sans-serif;}
h1{font-family: 'IM Fell DW Pica SC', sans-serif;}
...
<p>These are working: a ö ä ø</p>
<p>These are not: ā ā</p>
If I enter the same special characters in the preview, they are all working. The chars "a ö ä ø ā" can be tested in the preview box here: https://fonts.google.com/specimen/IM+Fell+DW+Pica
A colleague found that my characters are not part of latin and the font didn't support them. The Google Fonts preview will try another font in the background and that's why it looks like it is working. By manually defining the font I got the "Kahako A" as I wanted.
http://codepen.io/anon/pen/yaapKw
#font-face {
font-family: 'IM Fell DW Pica script=all rev=6';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/l/font?kit=xBKKJV4z2KsrtQnmjGO17HM30v831NPLrMTMWjZhJsgljegwSeDbtiHKgT6kSuH8OhAwGXnQZ2fim__WzpJMvT-ot7WhoQNhxW9XSHPUr95hxaMfyGAgGEujUXva07BSgdd4-sq5HMlny4sZVjdTlXcwcWdsnk25xubTXmsZQe5_f2oRvW8cxG4bMB_YmvaR96xlbbE5D7Gw2o7jubnkMA&skey=2798f34675f18639&v=v6) format('woff2');
}
...
font-family: 'IM Fell DW Pica script=all rev=6', sans-serif;
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.