Can CSS set appropriate properties if a font exists?
css, exists, fonts
Solution
CSS generally does not have conditions or other dynamic structures.
Your problem is solved through the use of so called "font stacks". You declare `font-family` with a list of comma separated fonts-names. The client browser now picks the font from that list which he has available. That's why the creation of good font stacks is a tricky task (because they should look similar or at least have similar letter spacing / line-height). If you google for Web font stacks you will get some good articles about that topic from professional font-guys who already did the work for you creating nice font-stacks.
An alternative nowadays is to provide the font you want as downloadable font via the `@font-face` declaration. However keep in mind that:
- you need several formats to support all browsers
- they add additional weight to the page load which might be relevant for mobiles
- You need the right to use the font or use a free font (Google offers a service where you can pick from a variety of free fonts)
Problem
I would like to use different fonts in my web application. As their size are not equal, I want to do something in CSS like this pseudo-code: ``` if (exists(font1)) { font-size: 9pt; font-family: font1; } else { font-size: 12pt; font-family: font2; } ``` Is it possible? What's the best and correct solution for it? How can I define font-size for a certain font and define another font-size for the next one ?