In customizing my angular material theme's typography. I understand that one can override the default font with their own font like so:
$custom-typography: mat-typography-config(
$font-family: 'Lato, monospace'
);
Although, I noticed that the source code shows two fonts , the default Roboto, and then Helvetica is also included in inverted commas:
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
Is that a secondary font? I would like if I could choose a secondary font. If this is not a secondary font, what is it?
thanks
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: Separate each value with a comma.
Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
Copied from w3schools
Related
TL;DR
I want to set up a Jekyll webpage (al-folio template) with two languages in which
my Latin text renders as Roboto font,
my Arabic scripts renders as with the Google font I added (Noto Naskh Arabic), and
my code blocks be rendered with monospace font.
But I can only do two of the three above simultaneously. Help needed.
Context
I'm a newbie in HTML, Jekyll, sass, and all that. So I used al-folio template to build my personal site. It is important for me to write on it in both English and my right-to-left mother-tongue language (Persian with Arabic scripts). Aesthetically, the default Arabic font my browser renders is not pleasing. So I added a nicer Google font to my _sass/_base.scss:
font-family: 'Noto Naskh Arabic', serif;
Since the line above originally doesn't exist in the theme adding it also overwrites my English font. So, I resorted to including the correct Latin font name to the same line:
font-family: 'Roboto', 'Noto Naskh Arabic', serif;
Now, everything looks fantastic except my code block's font. Originally, its font was monospace, and I want them to stay that way. Unfortunately, I cannot fix the last bit. Seemingly, this multilingual need of mine messes up some theme settings in a way that either one or more of these requirements breaks. I specifically tried to enforce the default code block font by adding
font-family: monospace;
to this, this, and this lines, but had no luck. Seemingly, other elements' settings (particularly the highlight class) overwrite the font.
Any solution or workaround is appreciated very much!
What's the difference between ui-sans-serif and sans-serif fonts in font-family in CSS? And ui-serif vs. serif? And ui-monospace vs. monospace?
Where does system-ui fit into this? Would you use it for all 3 types of fonts, and where would it go in the list of fonts?
I usually see the "ui-" variant coming first in the list of fonts in font-family in CSS, and the other coming last. Something like font-family: ui-sans-serif, (more fonts here), sans-serif. What's the point in doing that if the first matched font will be used? Since ui-sans-serif is a generic font, won't it always be matched and there's no need to add any fonts after it?
ui- generics should map to the default fonts of the system while non ui- generic ones map to the default of the browser.
A web-browser may have the same default font set for all platforms, however different platforms do have different default fonts.
The Liberation Sans Narrow font is included with many versions of Microsoft Windows. It is a discrete font, defined by the file LiberationSansNarrow-Regular.ttf.
How, in CSS, can this font be specified? Simply specifying:
font-family: "Liberation Sans Narrow";
will not work.
Note that specifying:
font-family: "Liberation Sans";
will work to specify the Liberation Sans font, which is defined by a different TrueType font file.
I only need the CSS code to work in Firefox. It is perfectly acceptable (and expected) that it will only work in browsers running on systems that have that specific font installed.
Note that I don't want to approximate Liberation Sans Narrow; I want that specific font to be used due to the clarity of rendering.
I want to specify this font for modifying the chrome within Firefox using userChrome.css.
it depends on how the file has been included in the page.
1) font included through url then the file would have the font name used for it. we need to use the same font name
2) font included locally through the font-face then we need to use the name we mention to that font
I would like to know how chrome chooses which font to render? I am asking this because using Chrome Developer Tools I can see that the font family computed is different from the font family rendered and this is confusing. Similar questions on Stackoverflow was not of much help in this particular instance.
My computer font family looks like:
font-family: museo-sans, sans-serif, Futura;
Rendered font looks like:
Helvetica—473 glyphs
In this article, it is mentioned that chrome maps a rendered font to a the computed font listed. What does this mean exactly and why does it do that? Is there a way to control which font is rendered?
Same as any other browser: if it can't find the first font, it tries the next, and so on and so on until it runs out of rules. If no fonts match, then the font is inherited from the parent element, all the way up to the document level, where it'll just pick the browser's default font.
In this case, things are a bit weird, because the order you're showing is "a real font" followed by "a generic CSS class that always resolves, but without any guarantee as to which font that will be, just that it'll be a sans-serif font", followed by the real font "futura".
So Chrome will try museo, won't find it, sees the generic "sans-serif" and just picks a known sans-serif font for you. Usually that's something like Arial or Helvetica, but the CSS spec doesn't say anything about which font it has to be, specifically. It just needs to be a sans-serif font.
The weird part here is that the ordering you chose means that the "futura" at the end will never be checked. The browser will always find a suitable font once it hits serif, sans-serif, cursive, fantasy, or monospace
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.