- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS font-family
The CSS font-family property is used to define the font family for the text, to make the text looks/appears more interactive. For example:
<!DOCTYPE html> <html> <head> <style> h2{border: 2px solid chocolate; padding: 10px;} .one{font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;} .two{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;} .three{font-family: 'Times New Roman', Times, serif;} .four{font-family: Arial, Helvetica, sans-serif;} .five{font-family: 'Courier New', Courier, monospace;} .six{font-family: Verdana, Geneva, Tahoma, sans-serif;} </style> </head> <body> <h2 class="one">font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif</h2> <h2 class="two">font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif</h2> <h2 class="three">font-family: 'Times New Roman', Times, serif</h2> <h2 class="four">font-family: Arial, Helvetica, sans-serif</h2> <h2 class="five">font-family: 'Courier New', Courier, monospace</h2> <h2 class="six">font-family: Verdana, Geneva, Tahoma, sans-serif</h2> </body> </html>
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
font-family: 'Times New Roman', Times, serif
font-family: Arial, Helvetica, sans-serif
font-family: 'Courier New', Courier, monospace
font-family: Verdana, Geneva, Tahoma, sans-serif
A font-family such as Courier New, Times New Roman etc. has a set of multiple fonts that obviously has a common design.
Important - Font family whose name contains one or multiple whitespace(s) must be quoted. For example: "Gill Sans"
Note - We can define multiple font families to the font-family property, separated by comma. The first font family will get apply, if browser supports. And if browser does not supports the first font family, then the second font family will get apply. If browser does not supports the second font family, then the third font family will get apply, and so on.
Types of font-family Names
- family-name - It is the name of font family such as Times, "Comic Sans MS", "Gill Sans" etc.
- generic-family - The generic-family names are keywords, used to apply the style when no fonts are available. For example: serif, sans-serif, cursive, fantasy, and monospace
Note - The generic-family must be included as the last item(s) in the list of font-family names. Also, the generic-family must not be quoted.
CSS font-family Syntax
The syntax of font-family property in CSS, is:
font-family: x;
Here the x may be a single or multiple set of values separated by comma, and should be defined using following:
- family-name generic-family - used to define the prioritized list of font family and/or generic family names
- initial - used to use the default value
- inherit - used to use the value inherited by the parent element
CSS font-family Example
This example contains the list of all font-family that are almost supported by all the web browsers. Therefore, you can include at least one of your favorite from all these font-family as backup font in the list of defined font-family
<!DOCTYPE html> <html> <head> <style> .a{font-family: Arial, sans-serif;} .b{font-family: Verdana, sans-serif;} .c{font-family: Helvetica, sans-serif;} .d{font-family: Tahoma, sans-serif;} .e{font-family: "Trebuchet MS", sans-serif;} .f{font-family: "Times New Roman", serif;} .g{font-family: Georgia, serif;} .h{font-family: Garamond, serif;} .i{font-family: "Courier New", monospace;} .j{font-family: "Brush Script MT", cursive;} </style> </head> <body> <h2 class="a">font-family: Arial, sans-serif</h2> <h2 class="b">font-family: Verdana, sans-serif</h2> <h2 class="c">font-family: Helvetica, sans-serif</h2> <h2 class="d">font-family: Tahoma, sans-serif</h2> <h2 class="e">font-family: "Trebuchet MS", sans-serif</h2> <h2 class="f">font-family: "Times New Roman", serif</h2> <h2 class="g">font-family: Georgia, serif</h2> <h2 class="h">font-family: Garamond, serif</h2> <h2 class="i">font-family: "Courier New", monospace</h2> <h2 class="j">font-family: "Brush Script MT", cursive</h2> </body> </html>
font-family: Arial, sans-serif
font-family: Verdana, sans-serif
font-family: Helvetica, sans-serif
font-family: Tahoma, sans-serif
font-family: "Trebuchet MS", sans-serif
font-family: "Times New Roman", serif
font-family: Georgia, serif
font-family: Garamond, serif
font-family: "Courier New", monospace
font-family: "Brush Script MT", cursive
« Previous Tutorial Next Tutorial »