- 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
The CSS font property is used to define custom/required font to provide excellent readers experience for our website. For example:
<!DOCTYPE html> <html> <head> <style> body{font: 1.2em/1.6 "Lucida Console", "Courier New", monospace;} </style> </head> <body> <h2>The font Property</h2> <p>This is an example of font property in CSS.</p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque repellat dolor asperiores saepe provident rem iste ratione tenetur laudantium possimus incidunt eum architecto sequi expedita animi, iure inventore voluptatem vero. </p> </body> </html>
The font Property
This is an example of font property in CSS.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque repellat dolor asperiores saepe provident rem iste ratione tenetur laudantium possimus incidunt eum architecto sequi expedita animi, iure inventore voluptatem vero.
In above example, from the following CSS code:
font: 1.2em/1.6 "Lucida Console", "Courier New", monospace;
The 1.2em/1.6 refers to font-size/line-height. That is, 1.2em is the font-size, whereas 1.6 is the line-height. And "Lucida Console", "Courier New", monospace refers to font-family.
CSS font Syntax
The syntax of font property in CSS, is:
font: font-style font-variant font-weight font-size/line-height font-family|menu|message-box|caption|small-caption|status-bar|icon|initial|inherit;
Important - From all, the font-size and font-family are the two, that are required.
The font property can also be called/used as shorthand of these properties:
- font-style - style the font of text
- font-variant - define whether the text should be in small-caps or not
- font-weight - make the text thicker or thinner
- font-size/line-height - define the size of a font/used to define the height of all lines of selected element
- font-family - define the font-family for the text, to make the text looks/appears more interactive
Here are the list of keywords that can also be used to define the font property:
- menu - used to define font for the menu (drop-downs)
- message-box - used to define font for the dialog boxes
- caption - used to define font for the captioned text
- small-caption - used to define smaller font for the captioned text
- status-bar - used to define font for the status bar
- icon - used to define font for the icon labels
- initial - used to use the default value
- inherit - used to use the value inherited by the parent element
CSS font Example
<!DOCTYPE html> <html> <head> <style> .a{font: menu;} .b{font: message-box;} .c{font: caption;} .d{font: small-caption;} .e{font: status-bar;} .f{font: icon;} </style> </head> <body> <h2>font: menu</h2> <div class="a"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> <h2>font: message-box</h2> <div class="b"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> <h2>font: caption</h2> <div class="c"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> <h2>font: small-caption</h2> <div class="d"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> <h2>font: status-bar</h2> <div class="e"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> <h2>font: icon</h2> <div class="f"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> </body> </html>
font: menu
Lorem ipsum dolor sit amet consectetur adipisicing elit.
font: message-box
Lorem ipsum dolor sit amet consectetur adipisicing elit.
font: caption
Lorem ipsum dolor sit amet consectetur adipisicing elit.
font: small-caption
Lorem ipsum dolor sit amet consectetur adipisicing elit.
font: status-bar
Lorem ipsum dolor sit amet consectetur adipisicing elit.
font: icon
Lorem ipsum dolor sit amet consectetur adipisicing elit.
The bad font may lead to loss in website traffic, because of bad user experience on reading the text available on website. Therefore, be sure to provide the best reading experience to your users, using the best font.
The only property with value that I can recommend is line-height with its value as 1.6. Rest of all the font related properties can be defined, based on you and your website.
« Previous Tutorial Next Tutorial »