1

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.

enter image description here

shaedrich
  • 5,457
  • 3
  • 26
  • 42
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • possible duplicate of [How does the font-family property work in CSS?](http://stackoverflow.com/questions/5055865/how-does-the-font-family-property-work-in-css) – Cody Gray - on strike Feb 26 '11 at 05:59

5 Answers5

1

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.

Wil
  • 10,234
  • 12
  • 54
  • 81
  • Ok so basically font stack mean group of multiple font or font-families defined. – Jitendra Vyas Feb 26 '11 at 04:01
  • Yep! It is up to you to make sure (on a design perspective) that you choose very similar fonts - but it is entirely up to you how to do this. – Wil Feb 26 '11 at 04:02
1

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).

Russell Dias
  • 70,980
  • 5
  • 54
  • 71
  • So will font-size get affected when my font-families changes? – Jitendra Vyas Feb 26 '11 at 03:58
  • @Jitendra Vyas: As long as the aspect ratios of the fonts are not too different. That is to say, `12px` in `Arial` may be not be different at all than `Liberation Sans`. (I'm assuming so, since this is the SO font stack, I think they would have done some testing in this area :) ) – Russell Dias Feb 26 '11 at 04:00
  • @Russell Dias - Hi Russell thanks for answer. Do you know any method or tool to know the aspect ratios differences between fonts, for fonts which we are defining for same element in CSS.? – Jitendra Vyas Feb 26 '11 at 04:03
  • @Jitendra Vyas: There are quite a few tried and tested web-safe font stacks, a simple Google search will yield plenty. If you want to define your own, maybe a good understanding in Typography might help. – Russell Dias Feb 26 '11 at 04:04
  • @Russell Dias - I need a group of similar fonts which should be same in all conditions , font-size in all cases like lowercase, uppercase, Sentense case and with same line-height – Jitendra Vyas Feb 26 '11 at 04:07
  • @Jitendra Vyas: I answered that in my previous comment. – Russell Dias Feb 26 '11 at 04:08
  • @Russell - Yes I know. I was just giving more detail. Although I just found a good tool for my needs. I'm going to play with it http://font-family.com/sandbox#moreSettings – Jitendra Vyas Feb 26 '11 at 04:09
  • @Jitendra Vyas: Glad you found a solution :) – Russell Dias Feb 26 '11 at 04:10
  • @Russell - I also found this http://stackoverflow.com/questions/3555962/css-different-font-sizes-on-different-families There is a CSS3 property to get consistency but not supported well. – Jitendra Vyas Feb 26 '11 at 04:13
0

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.

Michael Moriarty
  • 831
  • 13
  • 16
0

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

0

there's nothing new, this has been the standard way to set fonts for some years now.

Sebastian Patane Masuelli
  • 4,217
  • 1
  • 18
  • 23