Font-family - CSS: Cascading Style Sheets | MDN - Mozilla

• Skip to main content
• Skip to search
• Skip to select language

1. References
2. CSS
3. font-family

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Español
  • Français
  • 日本語
  • Português (do Brasil)
  • Русский
  • 中文 (简体)

• Try it
• Syntax
• Formal definition
• Formal syntax
• Examples
• Specifications
• Browser compatibility
• See also

1. CSS
2. Beginner's tutorials
3. Your first website: Styling the content
4. CSS styling basics
   1. What is CSS?
   2. Getting started with CSS
   3. Challenge: Styling a biography page
   4. Basic CSS selectors
   5. Attribute selectors
   6. Pseudo-classes and pseudo-elements
   7. Combinators
   8. The box model
   9. Handling conflicts
   10. CSS values and units
   11. Sizing items in CSS
   12. Backgrounds and borders
   13. Overflowing content
   14. Images, media, and form elements
   15. Styling tables
   16. Debugging CSS
   17. Challenge: Fundamental CSS comprehension
   18. Challenge: Creating fancy letterheaded paper
   19. Challenge: A cool-looking box
5. CSS text styling
   1. Fundamental text and font styling
   2. Styling lists
   3. Styling links
   4. Web fonts
   5. Challenge: Typesetting a community school homepage
6. CSS layout
   1. Introduction to CSS layout
   2. Floats
   3. Positioning
   4. Flexbox
   5. CSS grid layout
   6. Responsive design
   7. Media query fundamentals
   8. Challenge: Fundamental layout comprehension
7. CSS reference
8. Modules
   1. CSS anchor positioning
   2. CSS animations
   3. CSS backgrounds and borders
   4. CSS basic user interface
   5. CSS box alignment
   6. CSS box model
   7. CSS box sizing
   8. CSS cascade and inheritance
   9. CSS color adjustment
   10. CSS colors
   11. CSS compositing and blending
   12. CSS conditional rules
   13. CSS containment
   14. CSS counter styles
   15. CSS custom properties for cascading variables
   16. CSS display
   17. CSS filter effects
   18. CSS flexible box layout
   19. CSS font loading
   20. CSS fonts
   21. CSS fragmentation
   22. CSS generated content
   23. CSS grid layout
   24. CSS images
   25. CSS inline layout
   26. CSS lists and counters
   27. CSS logical properties and values
   28. CSS masking
   29. CSS media queries
   30. CSS motion path
   31. CSS multi-column layout
   32. CSS namespaces
   33. CSS nesting
   34. CSS overflow
   35. CSS overscroll behavior
   36. CSS paged media
   37. CSS positioned layout
   38. CSS properties and values API
   39. CSS pseudo-elements
   40. CSS ruby layout
   41. CSS scoping
   42. CSS scroll snap
   43. CSS scroll-driven animations
   44. CSS scrollbars styling
   45. CSS selectors
   46. CSS shadow parts
   47. CSS shapes
   48. CSS syntax
   49. CSS table
   50. CSS text
   51. CSS text decoration
   52. CSS transforms
   53. CSS transitions
   54. CSS view transitions
   55. CSS writing modes
   56. CSSOM view
9. Properties
   1. -moz-*
      1. -moz-float-edge Non-standard Deprecated
      2. -moz-force-broken-image-icon Non-standard Deprecated
      3. -moz-image-region Non-standard
      4. -moz-orient Non-standard
      5. -moz-user-focus Non-standard Deprecated
      6. -moz-user-input Non-standard Deprecated
   2. -webkit-*
      1. -webkit-border-before Non-standard
      2. -webkit-box-reflect Non-standard
      3. -webkit-line-clamp
      4. -webkit-mask-box-image Non-standard
      5. -webkit-mask-composite Non-standard
      6. -webkit-mask-position-x Non-standard
      7. -webkit-mask-position-y Non-standard
      8. -webkit-mask-repeat-x Non-standard
      9. -webkit-mask-repeat-y Non-standard
      10. -webkit-tap-highlight-color Non-standard
      11. -webkit-text-fill-color
      12. -webkit-text-security Non-standard
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout Non-standard
   3. accent-color
   4. align-*
      1. align-content
      2. align-items
      3. align-self
   5. all
   6. anchor-name Experimental
   7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Experimental
      11. animation-range-end Experimental
      12. animation-range-start Experimental
      13. animation-timeline Experimental
      14. animation-timing-function
   8. appearance
   9. aspect-ratio
   10. backdrop-filter
   11. backface-visibility
   12. background-*
       1. background
       2. background-attachment
       3. background-blend-mode
       4. background-clip
       5. background-color
       6. background-image
       7. background-origin
       8. background-position
       9. background-position-x
       10. background-position-y
       11. background-repeat
       12. background-size
   13. block-size
   14. border-*
       1. border
       2. border-block
       3. border-block-color
       4. border-block-end
       5. border-block-end-color
       6. border-block-end-style
       7. border-block-end-width
       8. border-block-start
       9. border-block-start-color
       10. border-block-start-style
       11. border-block-start-width
       12. border-block-style
       13. border-block-width
       14. border-bottom
       15. border-bottom-color
       16. border-bottom-left-radius
       17. border-bottom-right-radius
       18. border-bottom-style
       19. border-bottom-width
       20. border-collapse
       21. border-color
       22. border-end-end-radius
       23. border-end-start-radius
       24. border-image
       25. border-image-outset
       26. border-image-repeat
       27. border-image-slice
       28. border-image-source
       29. border-image-width
       30. border-inline
       31. border-inline-color
       32. border-inline-end
       33. border-inline-end-color
       34. border-inline-end-style
       35. border-inline-end-width
       36. border-inline-start
       37. border-inline-start-color
       38. border-inline-start-style
       39. border-inline-start-width
       40. border-inline-style
       41. border-inline-width
       42. border-left
       43. border-left-color
       44. border-left-style
       45. border-left-width
       46. border-radius
       47. border-right
       48. border-right-color
       49. border-right-style
       50. border-right-width
       51. border-spacing
       52. border-start-end-radius
       53. border-start-start-radius
       54. border-style
       55. border-top
       56. border-top-color
       57. border-top-left-radius
       58. border-top-right-radius
       59. border-top-style
       60. border-top-width
       61. border-width
   15. bottom
   16. box-*
       1. box-align Non-standard Deprecated
       2. box-decoration-break
       3. box-direction Non-standard Deprecated
       4. box-flex Non-standard Deprecated
       5. box-flex-group Non-standard Deprecated
       6. box-lines Non-standard Deprecated
       7. box-ordinal-group Non-standard Deprecated
       8. box-orient Non-standard Deprecated
       9. box-pack Non-standard Deprecated
       10. box-shadow
       11. box-sizing
   17. break-*
       1. break-after
       2. break-before
       3. break-inside
   18. caption-side
   19. caret-color
   20. clear
   21. clip-*
       1. clip Deprecated
       2. clip-path
       3. clip-rule
   22. color-*
       1. color
       2. color-interpolation
       3. color-interpolation-filters
       4. color-scheme
   23. column-*
       1. column-count
       2. column-fill
       3. column-gap
       4. column-rule
       5. column-rule-color
       6. column-rule-style
       7. column-rule-width
       8. column-span
       9. column-width
   24. columns
   25. contain-*
       1. contain
       2. contain-intrinsic-block-size
       3. contain-intrinsic-height
       4. contain-intrinsic-inline-size
       5. contain-intrinsic-size
       6. contain-intrinsic-width
   26. container-*
       1. container
       2. container-name
       3. container-type
   27. content
   28. content-visibility
   29. counter-*
       1. counter-increment
       2. counter-reset
       3. counter-set
   30. cursor
   31. cx
   32. cy
   33. d
   34. direction
   35. display
   36. dominant-baseline
   37. empty-cells
   38. field-sizing Experimental
   39. fill-*
       1. fill
       2. fill-opacity
       3. fill-rule
   40. filter
   41. flex-*
       1. flex
       2. flex-basis
       3. flex-direction
       4. flex-flow
       5. flex-grow
       6. flex-shrink
       7. flex-wrap
   42. float
   43. flood-color
   44. flood-opacity
   45. font-*
       1. font
       2. font-family
       3. font-feature-settings
       4. font-kerning
       5. font-language-override
       6. font-optical-sizing
       7. font-palette
       8. font-size
       9. font-size-adjust
       10. font-smooth Non-standard
       11. font-stretch
       12. font-style
       13. font-synthesis
       14. font-synthesis-position Experimental
       15. font-synthesis-small-caps
       16. font-synthesis-style
       17. font-synthesis-weight
       18. font-variant
       19. font-variant-alternates
       20. font-variant-caps
       21. font-variant-east-asian
       22. font-variant-emoji
       23. font-variant-ligatures
       24. font-variant-numeric
       25. font-variant-position
       26. font-variation-settings
       27. font-weight
   46. forced-color-adjust
   47. gap
   48. grid-*
       1. grid
       2. grid-area
       3. grid-auto-columns
       4. grid-auto-flow
       5. grid-auto-rows
       6. grid-column
       7. grid-column-end
       8. grid-column-start
       9. grid-row
       10. grid-row-end
       11. grid-row-start
       12. grid-template
       13. grid-template-areas
       14. grid-template-columns
       15. grid-template-rows
   49. hanging-punctuation
   50. height
   51. hyphenate-character
   52. hyphenate-limit-chars
   53. hyphens
   54. image-*
       1. image-orientation
       2. image-rendering
       3. image-resolution Experimental
   55. initial-letter
   56. inline-size
   57. inset-*
       1. inset
       2. inset-block
       3. inset-block-end
       4. inset-block-start
       5. inset-inline
       6. inset-inline-end
       7. inset-inline-start
   58. interpolate-size Experimental
   59. isolation
   60. justify-*
       1. justify-content
       2. justify-items
       3. justify-self
   61. left
   62. letter-spacing
   63. lighting-color
   64. line-*
       1. line-break
       2. line-height
       3. line-height-step Experimental
   65. list-*
       1. list-style
       2. list-style-image
       3. list-style-position
       4. list-style-type
   66. margin-*
       1. margin
       2. margin-block
       3. margin-block-end
       4. margin-block-start
       5. margin-bottom
       6. margin-inline
       7. margin-inline-end
       8. margin-inline-start
       9. margin-left
       10. margin-right
       11. margin-top
       12. margin-trim Experimental
   67. marker-*
       1. marker
       2. marker-end
       3. marker-mid
       4. marker-start
   68. mask-*
       1. mask
       2. mask-border
       3. mask-border-mode
       4. mask-border-outset
       5. mask-border-repeat
       6. mask-border-slice
       7. mask-border-source
       8. mask-border-width
       9. mask-clip
       10. mask-composite
       11. mask-image
       12. mask-mode
       13. mask-origin
       14. mask-position
       15. mask-repeat
       16. mask-size
       17. mask-type
   69. math-*
       1. math-depth
       2. math-shift Experimental
       3. math-style
   70. max-*
       1. max-block-size
       2. max-height
       3. max-inline-size
       4. max-width
   71. min-*
       1. min-block-size
       2. min-height
       3. min-inline-size
       4. min-width
   72. mix-blend-mode
   73. object-fit
   74. object-position
   75. offset-*
       1. offset
       2. offset-anchor
       3. offset-distance
       4. offset-path
       5. offset-position
       6. offset-rotate
   76. opacity
   77. order
   78. orphans
   79. outline-*
       1. outline
       2. outline-color
       3. outline-offset
       4. outline-style
       5. outline-width
   80. overflow-*
       1. overflow
       2. overflow-anchor
       3. overflow-block
       4. overflow-clip-margin
       5. overflow-inline
       6. overflow-wrap
       7. overflow-x
       8. overflow-y
   81. overlay Experimental
   82. overscroll-*
       1. overscroll-behavior
       2. overscroll-behavior-block
       3. overscroll-behavior-inline
       4. overscroll-behavior-x
       5. overscroll-behavior-y
   83. padding-*
       1. padding
       2. padding-block
       3. padding-block-end
       4. padding-block-start
       5. padding-bottom
       6. padding-inline
       7. padding-inline-end
       8. padding-inline-start
       9. padding-left
       10. padding-right
       11. padding-top
   84. page-*
       1. page
       2. page-break-after
       3. page-break-before
       4. page-break-inside
   85. paint-order
   86. perspective
   87. perspective-origin
   88. place-*
       1. place-content
       2. place-items
       3. place-self
   89. pointer-events
   90. position-*
       1. position
       2. position-anchor Experimental
       3. position-area Experimental
       4. position-try Experimental
       5. position-try-fallbacks Experimental
       6. position-try-order Experimental
       7. position-visibility Experimental
   91. print-color-adjust
   92. quotes
   93. r
   94. resize
   95. right
   96. rotate
   97. row-gap
   98. ruby-align
   99. ruby-position
   100. rx
   101. ry
   102. scale
   103. scroll-*
        1. scroll-behavior
        2. scroll-margin
        3. scroll-margin-block
        4. scroll-margin-block-end
        5. scroll-margin-block-start
        6. scroll-margin-bottom
        7. scroll-margin-inline
        8. scroll-margin-inline-end
        9. scroll-margin-inline-start
        10. scroll-margin-left
        11. scroll-margin-right
        12. scroll-margin-top
        13. scroll-padding
        14. scroll-padding-block
        15. scroll-padding-block-end
        16. scroll-padding-block-start
        17. scroll-padding-bottom
        18. scroll-padding-inline
        19. scroll-padding-inline-end
        20. scroll-padding-inline-start
        21. scroll-padding-left
        22. scroll-padding-right
        23. scroll-padding-top
        24. scroll-snap-align
        25. scroll-snap-stop
        26. scroll-snap-type
        27. scroll-timeline Experimental
        28. scroll-timeline-axis Experimental
        29. scroll-timeline-name Experimental
   104. scrollbar-*
        1. scrollbar-color
        2. scrollbar-gutter
        3. scrollbar-width
   105. shape-*
        1. shape-image-threshold
        2. shape-margin
        3. shape-outside
        4. shape-rendering
   106. stop-color
   107. stop-opacity
   108. stroke-*
        1. stroke
        2. stroke-dasharray
        3. stroke-dashoffset
        4. stroke-linecap
        5. stroke-linejoin
        6. stroke-miterlimit
        7. stroke-opacity
        8. stroke-width
   109. tab-size
   110. table-layout
   111. text-*
        1. text-align
        2. text-align-last
        3. text-anchor
        4. text-combine-upright
        5. text-decoration
        6. text-decoration-color
        7. text-decoration-line
        8. text-decoration-skip Experimental
        9. text-decoration-skip-ink
        10. text-decoration-style
        11. text-decoration-thickness
        12. text-emphasis
        13. text-emphasis-color
        14. text-emphasis-position
        15. text-emphasis-style
        16. text-indent
        17. text-justify
        18. text-orientation
        19. text-overflow
        20. text-rendering
        21. text-shadow
        22. text-size-adjust Experimental
        23. text-spacing-trim Experimental
        24. text-transform
        25. text-underline-offset
        26. text-underline-position
        27. text-wrap
        28. text-wrap-mode
        29. text-wrap-style
   112. timeline-scope Experimental
   113. top
   114. touch-action
   115. transform-*
        1. transform
        2. transform-box
        3. transform-origin
        4. transform-style
   116. transition-*
        1. transition
        2. transition-behavior
        3. transition-delay
        4. transition-duration
        5. transition-property
        6. transition-timing-function
   117. translate
   118. unicode-bidi
   119. user-modify Non-standard Deprecated
   120. user-select
   121. vector-effect
   122. vertical-align
   123. view-*
        1. view-timeline Experimental
        2. view-timeline-axis Experimental
        3. view-timeline-inset Experimental
        4. view-timeline-name Experimental
        5. view-transition-name
   124. visibility
   125. white-space
   126. white-space-collapse
   127. widows
   128. width
   129. will-change
   130. word-break
   131. word-spacing
   132. writing-mode
   133. x
   134. y
   135. z-index
   136. zoom
10. Selectors
    1. & nesting selector
    2. Attribute selectors
    3. Class selectors
    4. ID selectors
    5. Type selectors
    6. Universal selectors
11. Combinators
    1. Child combinator
    2. Column combinator Experimental
    3. Descendant combinator
    4. Namespace separator
    5. Next-sibling combinator
    6. Selector list
    7. Subsequent-sibling combinator
12. Pseudo-classes
    1. :-moz-broken Non-standard Deprecated
    2. :-moz-drag-over Non-standard
    3. :-moz-first-node Experimental Non-standard
    4. :-moz-handler-blocked Non-standard
    5. :-moz-handler-crashed Non-standard
    6. :-moz-handler-disabled Non-standard
    7. :-moz-last-node Experimental Non-standard
    8. :-moz-loading Non-standard
    9. :-moz-locale-dir(ltr) Non-standard
    10. :-moz-locale-dir(rtl) Non-standard
    11. :-moz-only-whitespace Non-standard
    12. :-moz-submit-invalid Non-standard
    13. :-moz-suppressed Non-standard
    14. :-moz-user-disabled Non-standard
    15. :-moz-window-inactive Non-standard
    16. :active
    17. :any-link
    18. :autofill
    19. :blank Experimental
    20. :buffering
    21. :checked
    22. :current Experimental
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has-slotted Experimental
    38. :has()
    39. :host
    40. :host-context()
    41. :host()
    42. :hover
    43. :in-range
    44. :indeterminate
    45. :invalid
    46. :is()
    47. :lang()
    48. :last-child
    49. :last-of-type
    50. :left
    51. :link
    52. :local-link Experimental
    53. :modal
    54. :muted
    55. :not()
    56. :nth-child()
    57. :nth-last-child()
    58. :nth-last-of-type()
    59. :nth-of-type()
    60. :only-child
    61. :only-of-type
    62. :optional
    63. :out-of-range
    64. :past
    65. :paused
    66. :picture-in-picture
    67. :placeholder-shown
    68. :playing
    69. :popover-open
    70. :read-only
    71. :read-write
    72. :required
    73. :right
    74. :root
    75. :scope
    76. :seeking
    77. :stalled
    78. :state()
    79. :target
    80. :target-within Experimental
    81. :user-invalid
    82. :user-valid
    83. :valid
    84. :visited
    85. :volume-locked
    86. :where()
13. Pseudo-elements
    1. ::-moz-color-swatch Non-standard
    2. ::-moz-focus-inner Experimental Non-standard
    3. ::-moz-list-bullet Experimental Non-standard
    4. ::-moz-list-number Experimental Non-standard
    5. ::-moz-meter-bar Non-standard
    6. ::-moz-progress-bar Experimental Non-standard
    7. ::-moz-range-progress Non-standard
    8. ::-moz-range-thumb Non-standard
    9. ::-moz-range-track Non-standard
    10. ::-webkit-inner-spin-button Non-standard
    11. ::-webkit-meter-bar Non-standard Deprecated
    12. ::-webkit-meter-even-less-good-value Non-standard
    13. ::-webkit-meter-inner-element Non-standard
    14. ::-webkit-meter-optimum-value Non-standard
    15. ::-webkit-meter-suboptimum-value Non-standard
    16. ::-webkit-progress-bar Non-standard
    17. ::-webkit-progress-inner-element Non-standard
    18. ::-webkit-progress-value Non-standard
    19. ::-webkit-scrollbar Non-standard
    20. ::-webkit-search-cancel-button Non-standard
    21. ::-webkit-search-results-button Non-standard
    22. ::-webkit-slider-runnable-track Experimental Non-standard
    23. ::-webkit-slider-thumb Experimental Non-standard
    24. ::after
    25. ::backdrop
    26. ::before
    27. ::cue
    28. ::file-selector-button
    29. ::first-letter
    30. ::first-line
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
14. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document Non-standard Deprecated
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try Experimental
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition
15. Functions
    1. -moz-image-rect Non-standard Deprecated
    2. abs()
    3. acos()
    4. anchor-size() Experimental
    5. anchor() Experimental
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. calc-size() Experimental
    11. calc()
    12. clamp()
    13. cos()
    14. counter()
    15. counters()
    16. cross-fade()
    17. element() Experimental
    18. env()
    19. exp()
    20. fit-content()
    21. hypot()
    22. log()
    23. max()
    24. min()
    25. minmax()
    26. mod()
    27. pow()
    28. ray()
    29. rem()
    30. repeat()
    31. round()
    32. sign()
    33. sin()
    34. sqrt()
    35. symbols()
    36. tan()
    37. url()
    38. var()
16. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency-percentage>
    25. <frequency>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue-interpolation-method>
    30. <hue>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length-percentage>
    35. <length>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area> Experimental
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> Deprecated
    47. <string>
    48. <system-color>
    49. <time-percentage>
    50. <time>
    51. <transform-function>
    52. <url>
17. Guides
18. Animations
    1. Using CSS animations
19. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
20. Box alignment
    1. Box alignment in block layout
    2. Box alignment in flexbox
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
21. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
22. Colors
    1. Applying_color_to_HTML_elements
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Accessibility_Understanding_colors_and_luminance"
    6. Accessibility: Color contrast
23. Columns
    1. Basic concepts of multi-column layout
    2. Styling columns
    3. Spanning and balancing columns
    4. Handling overflow in multi-column layout
    5. Handling content breaks in multi-column layout
24. Conditional rules
    1. Using feature queries
25. Containment
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
26. CSSOM view
    1. Coordinate systems
27. Flexbox
    1. Basic concepts of flexbox
    2. Relationship of flexbox to other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling ratios of flex items along the main axis
    6. Mastering wrapping of flex items
    7. Typical use cases of flexbox
28. Flow layout
    1. Block and inline layout in normal flow
    2. In flow and out of flow
    3. Introduction to formatting contexts
    4. Flow layout and writing modes
    5. Flow layout and overflow
29. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
30. Grid
    1. Basic concepts of grid layout
    2. Relationship of grid layout to other layout methods
    3. Grid layout using line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout
    7. Box alignment in grid layout
    8. Grids, logical values, and writing modes
    9. Grid layout and accessibility
    10. CSS grid layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout Experimental
31. Images
    1. Using CSS gradients
32. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
33. Logical properties
    1. Basic concepts of logical properties and values
    2. Logical properties for floating and positioning
    3. Logical properties for margins, borders, and padding
    4. Logical properties for sizing
34. Math functions
    1. Using CSS math functions
35. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
    4. Printing
36. Nesting style rules
    1. Using CSS nesting
    2. CSS nesting at-rules
    3. CSS nesting and specificity
37. Positioning
    1. Understanding z-index
38. Scroll snap
    1. Basic concepts of scroll snap
39. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes with shape-outside
    4. Shapes from images
40. Text
    1. Wrapping and breaking text
41. Transforms
    1. Using CSS transforms
42. Transitions
    1. Using CSS transitions
43. CSS Layout cookbook
44. 1. Recipe: Media objects
    2. Column layouts
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
45. Tools
46. 1. Color picker tool
    2. Box-shadow generator
    3. Border-image generator
    4. Border-radius generator

• Try it
• Syntax
• Formal definition
• Formal syntax
• Examples
• Specifications
• Browser compatibility
• See also

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

Try it

Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.

It is often convenient to use the shorthand property font to set font-size and other font related properties all at once.

You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

Syntax

css/* A font family name and a generic family name */ font-family: "Gill Sans Extrabold", sans-serif; font-family: "Goudy Bookletter 1911", sans-serif; /* A generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: ui-serif; font-family: ui-sans-serif; font-family: ui-monospace; font-family: ui-rounded; font-family: emoji; font-family: math; font-family: fangsong; /* Global values */ font-family: inherit; font-family: initial; font-family: revert; font-family: revert-layer; font-family: unset;

The font-family property lists one or more font families, separated by commas. Each font family is specified as either a <family-name> or a <generic-name> value.

The example below lists two font families, the first with a <family-name> and the second with a <generic-name>:

cssfont-family: "Gill Sans Extrabold", sans-serif;

Values

<family-name>

The name of a font family. This must be either a single <string> value or a space-separated sequence of <custom-ident> values. String values must be quoted but may contain any Unicode character. Custom identifiers are not quoted, but certain characters must be escaped.

It is good practice to quote font family names that contain white space, digits, or punctuation characters other than hyphens.

See also Valid family names.

<generic-name>

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:

serif

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.

For example: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

sans-serif

Glyphs have stroke endings that are plain.

For example: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.

monospace

All glyphs have the same fixed width.

For example: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.

cursive

Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work.

For example: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.

fantasy

Fantasy fonts are primarily decorative fonts that contain playful representations of characters.

For example: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

system-ui

Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

ui-serif

The default user interface serif font.

ui-sans-serif

The default user interface sans-serif font.

ui-monospace

The default user interface monospace font.

ui-rounded

The default user interface font that has rounded features.

math

This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.

emoji

Fonts that are specifically designed to render emoji.

fangsong

A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents.

Formal definition

Initial value	depends on user agent
Applies to	all elements and text. It also applies to ::first-letter and ::first-line.
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

font-family = [ <family-name> | <generic-family> ]# <family-name> = <string> | <custom-ident>+ <generic-family> = <generic-script-specific> | <generic-complete> | <generic-incomplete> <generic-script-specific> = generic( kai ) | generic( fangsong ) | generic( nastaliq ) <generic-complete> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace <generic-incomplete> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded

Examples

Some common font families

css.serif { font-family: Times, "Times New Roman", Georgia, serif; } .sansserif { font-family: Verdana, Arial, Helvetica, sans-serif; } .monospace { font-family: "Lucida Console", Courier, monospace; } .cursive { font-family: cursive; } .fantasy { font-family: fantasy; } .emoji { font-family: emoji; } .math { font-family: math; } .fangsong { font-family: fangsong; } <div class="serif">This is an example of a serif font.</div> <div class="sansserif">This is an example of a sans-serif font.</div> <div class="monospace">This is an example of a monospace font.</div> <div class="cursive">This is an example of a cursive font.</div> <div class="fantasy">This is an example of a fantasy font.</div> <div class="math">This is an example of a math font.</div> <div class="emoji">This is an example of an emoji font.</div> <div class="fangsong">This is an example of a fangsong font.</div>

Valid family names

The following declarations are valid:

cssfont-family: "Goudy Bookletter 1911", sans-serif;

The following declarations are invalid:

cssfont-family: Goudy Bookletter 1911, sans-serif; font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;

The following example is technically valid but is not recommended:

cssfont-family: Gill Sans Extrabold, sans-serif;

Specifications

Specification
CSS Fonts Module Level 4 # generic-font-families
CSS Fonts Module Level 4 # font-family-prop

Browser compatibility

BCD tables only load in the browser

See also

• font-style
• font-weight
• Learn: Fundamental text and font styling

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Dec 19, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content