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.
Related
font-display is a new CSS property that allows developers to control how fonts are rendered depending on if they load quickly enough. There's been a few articles on it:
Controlling Font Performance with font-display - Google Developers
font-display for the Masses
None of them mention icon fonts. The specification does have an example that mentions icon fonts for the block value, but to me it doesn't make sense to use that:
'block'
Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
If I understand the specification correctly, this means if the icons haven't loaded after the "short block period", the fallback font will be used, resulting in random letters appearing in their place.
If I use the optional value, the random letters will never appear but neither will the icons if they haven't loaded in the "extremely small block period".
There doesn't appear to be a value for giving an infinite block period without swap (so it would show invisible text until and unless the font loads). Is there a reason behind this and is there a workaround?
font-display: block;
As you commented, block still has a swap period; so it's still rendered until it's loaded.
Quoting Chris Coyier:
Wanna hear something quite unfortunate? We already mentioned font-display: block;. Wouldn't you think it, uh, well, blocked the rendering of text until the custom font loads? It doesn't. It's still got a swap period. It would be the perfect thing for something like icon fonts where the icon (probably) has no meaning unless the custom font loads. Alas, there is no font-display solution for that.
Considering alternatives:
I've also been there. If you have the chance, you might need to switch to SVG for icons. It has a few advantages over font-icons: SVG is better at pretty much everything than icon fonts.
Even Zach Leatherman, web fonts expert, has opinions about it on his very famous Comprehensive Guide to Font Loading Strategies.
This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.
I've never become fluent with CSS but I don't think I had this situation before.
I'm thinking of using stylish to add CSS to a third-party site over which I have no direct control. So the HTML and CSS is not really set up for the kind of customizations I want to do.
The site I wish to tweak doesn't allow good control over fonts but some of its pages (user created) make a lot of use of some exotic Unicode ranges (eg. Khmer) that my OS/browser combination choose a terrible font for:
Can I make a CSS rule that will apply to all text in a page that falls within a certain Unicode range to set it to a known good font, without delving into the structure of the page HTML/DOM?
(Or is unicode-range only for doing something different with webfonts?
The answer is yes in most browsers
MDN - Unicode Range
The unicode-range CSS descriptor sets the specific range of characters
to be downloaded from a font defined by #font-face and made available
for use on the current page.
Example:
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;
}
Support: CanIUse.com
Also see this Article
unicode-range(s) can be used to specify which specific set (or range) of characters you want to be downloaded from a font in an attempt to save bandwidth. See here: Mozilla unicode-range info
Without seeing the actual CSS you could attempt to just force a different font to be used completely by doing something such as declaring
body{font-family: arial,sans-serif;}
or adding !important (which I would avoid under any normal circumstance) if the other fonts refuse to give way e.g.
body{font-family: arial,sans-serif !important;}
If you can bypass using the original font faces then the unicode-ranges will cease to be important. Watch out for things like icon-fonts though as removing those may make certain symbols/graphics disappear.
Hope that helps.
Sorry I rather misunderstood your question - thought you wanted rid of the existing unicode fonts altogether.
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.
When using #font-face in css, the browser loads my page's text before the font, which results in the font jumping from one style to another (from Arial to myfont). When using condensed fonts, for example, the problem is very pronounced visually.
I only want to display the one font that I have chosen with #font-face. What is the best way to do this?
It's called FOUT the best way to handle it in my experience is by using Google's font loader:
https://developers.google.com/webfonts/docs/webfont_loader
Essentially what you do is let the page load normally (during which the body is hidden or styled font blocks are hidden, your choice), once they are loaded a class is added to the body of the page, this triggers the display of the styled fonts.
The script adds these classes so you can style appropriately:
.wf-inactive - failed to load
.wf-loading - during load
.wf-active - loaded fine
The only downfall is that it requires Javascript..
This is a pretty well-known issue in some browsers (Firefox 3.5/3.6, IE 7-9). WebINK has a JavaScript file available which will allow you to work around the problem.
This is known as a Flash Of Unstyled Text and is due, as you mentioned, to the font files loading in tandem with the rest of the page, whose text will be styled with default or fallback fonts until the new font face is loaded and can be applied.
It appears that the best way to minimize the occurrence of this effect is to minimize the time the client spends loading your custom fonts. Two measures you can take to accomplish this are compressing your font files via gZip and specifying your font files for long-term caching by a viewer's browser for subsequent views via a far-future expires header.
If the FOUT is still pretty jarring for your users, you can specify a similarly-shaped font which is likely to be installed on most viewers' machines as a fallback to keep your page size relatively consistent as the custom font loads. For example, for your condensed font, most viewers already have Impact as an available font, or Arial Narrow, both of which adhere to a 'condensed' style.
And if all else fails, you can always style the entire text of your document with color: rgba(0,0,0,0) and use JavaScript to remove that rule at the end of a timer.
I'm using Dreamweaver for many years which gives some suggestions to put font-families in CSS.
Is it not a font-stack? What is new in the term "CSS Font Stack"
What I know is, that one defines multiple font families to keep the typography consistent if any font is not available in system.
You are correct - You define multiple fonts and the browser will simply choose the first one in the list that you have on your system.
A font stack allows you to define multiple fonts to essentially provide a better experience for users.
Using the CSS font-family property, you can define multiple fonts, like so:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
This reads from left to right, if the user does not have Arial then font-family will fallback on Liberation all the way down to the most basic sans-serif (select any sans-serif font if the aforementioned fonts are not found).
font stack, is just a list of fonts (of font families), if the first is not available to the browser, then the second is used etc..
your picture shows 6 font stacks, you could choose from
there's nothing new, this has been the standard way to set fonts for some years now.
You are correct in your thinking. The pulldown menu has 'Web Safe' font stacks to choose from. If you use any of them your text should render fairly consistently on all devices and on all browsers.
The trend now is to use Google Fonts or some other imported or loaded fonts and thereby control what is rendered. Even then it is recommended to also include one or more alternative standard fonts in a font stack in case your visitors cannot load Google Fonts or the other choices you provide.