CSS Reference

Quick Reference

The @font-face rule allows for the use of fonts other than “web-safe” fonts. A font name is defined for the font and then the custom font is pointed to it.

This is NOT specific to any elements. It is just used to load the font for use in the font-family property to apply to an element.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"),
        url("/fonts/opensans-regular-webfont.woff") format("woff");
}

Note

The @font-face rule is used to include optional fonts and store them locally which can be quicker for the browser to retrieve. Any font can be downloaded and stored locally and referred to using the @font-face rule.

Values

These are the allowed values.

Font DescriptorValuesDescription
font-familynameDefines the name of the font (required)
srcURLDefines the URL(s) where the font should be downloaded from (required)
font-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Defines how the font should be stretched (default value is "normal")
font-stylenormal
italic
oblique
Defines how the font should be styled (default value is "normal")
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
Defines the boldness of the font (default value is "normal")
unicode-rangeunicode-rangeDefines the range of unicode characters the font supports (default value is "U+0-10FFFF")

CSS Notes:


We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.