CODEWITHSUNDEEP
cssfont-family
Alex
Alex

Reputation: 21

font-family browser selection

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.

Upvotes: 2

Views: 167

Answers (1)

Kareem Sultan
Kareem Sultan

Reputation: 190

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;
}

Upvotes: 0

Related Questions