font-family browser selection - css

Question

I'm trying to set the browser to use the Quicksand font which I am pulling directly from a file in the same folder. When I format the code as follows the browser uses the Quicksand font:
#charset "utf-8";
#font-face {
font-family: Quicksand;
src: url('Quicksand-Regular.woff') format ('woff'),
url('Quicksand-Regular.tff') format('truetype');
}
h1, h2 {
font-family: Quicksand;
}
When I add more options for the font-family the browser defaults to the sans-serif font rather than using the Quicksand font.
#charset "utf-8";
#font-face {
font-family: Quicksand;
src: url('Quicksand-Regular.woff') format ('woff'),
url('Quicksand-Regular.tff') format('truetype');
}
h1, h2 {
font-family: Quicksand, sans-serif;
}
I'm trying to get the browser to default to Quicksand font with sans-serif as backup for an assignment and I can't figure out what exactly I'm doing wrong in the above code.

Answer 1

The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like "Times New Roman".
More than one font family is specified in a comma-separated list:
p {
font-family: "Quicksand", sans-serif;
}