I'm working with an external font type for my website, I have the 3 ttf files, for normal, bold and italic styles.
I'm wondering if I can change the font weight, because I already tried to use the font-weight CSS property, but it seems that it only works for either normal or bold weight, so I cannot use any weight in between.
Is there any way to use other weight for my font? Do I need to include any extra files?
In short: no, you can't use other weights as is - you'll need more files. You can use normal and bold because you've included normal and bold font files. Other weights will require an accompanying font file as well.
For a visual, check out any of the fonts at Google Fonts: https://www.google.com/fonts
You'll notice there are multiple files, each representing a different font weight (and/or style, such as italic).
Related
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.
When using unicode-range in a #font-face block, how are ligatures included?
If a ligature contains a mixture of glyphs both inside and outside the range(s) provided by unicode-range, is that font included in the ligature, or will the browser try to find a more appropriate font?
Alternatively, does it require that all of the ligature's glyphs are included in the font for it to render the ligature?
Is any of this in the specification? I can't find any literature on it.
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
I took a CSS quiz at w3schools.com, and I got all of the answers correct except the one below. I tried to search on the subject, but as far as I can see the answer should be correct. Where am I wrong? Really confused with this.
15. Which property is used to change the font of an element?
You answered:
font-family
Wrong Answer!
The font property is the one that changes all aspects of a font, including family, style and weight. The font-family property only changes the font-family. The family is a group of related fonts (or typefaces).
So 'Comic Sans MS' is a font family, while 'Comic Sans MS Bold 10pt' is a font. In speech, people tend to mix up those terms.
font and font-family do different things:
Best illustrated with an example. Arial is a font family. Arial Bold 14 point is a type font. Helvetica is a font family. Helvetica Ultra Compressed 26 point is a type font.
The quiz says that the correct answer is that both font-family and font can be used to set the font. This can be characterized as correct, when the other options are font-family alone and font alone. This question, and the quiz in its entirety, is not as seriously wrong as much of w3schools content (see http://w3fools.com), just largely pointless and inaccurate.
The font-family property sets, as the name suggests, the font family alone. The font shorthand sets all normally settable font properties and also line height. The interpretation of the question revolves around the question “what is a font?” If you mean font family, then font-family sets that only, whereas font also sets font size, font weight, etc. If you mean a specific typeface in a specific size, specific weight etc., then only font does that.
15. Which property is used to change the font of an element?
You answered:
font
Wrong Answer!
Basically the correct answer is both of them (font anf font-family)
I'd like to tell the browser to use a font that is both monospace and sans-serif (usually the default monospace font has serifs, and the default sans-serif font isnt monospaced). Is there any way to specify this in CSS other than to provide a list of fonts I know to fit my criteria?
CSS's font-family doesn't allow specifying more than one generic font keyword in a single font family name, so you'll either have to go with monospace or sans-serif.
No, you can't say what type of family of font you want. CSS doesn't know if a font has serifs or not.
However, you can just look on here:
http://code.google.com/webfonts
And use one of those fonts and it'll work across all browsers.