-
CSS Syntax
-
CSS Selectors
-
CSS How To
-
CSS Comments
-
CSS Colors
-
CSS Backgrounds
-
CSS Borders
-
CSS Margins
-
CSS Padding
-
CSS Dimension
-
CSS Box Model
-
CSS Outline
-
CSS Text
-
CSS Fonts
-
CSS Links
-
CSS Lists
-
CSS Tables
-
CSS Display
-
CSS Position
-
CSS Overflow
-
CSS Float
-
CSS Align
-
CSS Combinators
-
CSS Pseudo-class
-
CSS Opacity
-
CSS Attr Selectors
-
CSS Forms
-
CSS Transitions
-
CSS Transforms
-
CSS Animations
-
CSS !important
-
CSS Flex
-
CSS GRID
-
CSS Media Queries
CSS Fonts
CSS provides a range of properties that let you control the typeface, size, style, and overall appearance of text on a webpage. Whether you want to set your text to a specific font, make it bold, italic, or even use a custom font you found online, CSS has got you covered. With the right font settings, you can ensure your text is readable, visually appealing, and perfectly aligned with your site’s design.
Font-family: Specifies the typeface to be used for text.
Font-size: Sets the size of the font.
Font-weight: Defines the thickness of the characters (e.g., normal, bold, bolder, etc.).
Font-style: Determines the style of the font (e.g., normal, italic, oblique).
Font: A shorthand property to set various font properties in one declaration.
@font-face: Enables custom fonts to be loaded and used on web pages.
Font-family
Values:
Specific font names: Arial, Verdana, Georgia, etc.
Generic font families: serif, sans-serif, monospace, cursive, fantasy.
The font-family property defines which typeface will be used to display the text of an element.
- Example 1
- Example 2
The font family can be a specific font or a generic family. It’s common to provide a list, so if one font isn’t available, the browser can use another font from the list.
Font-size
Values:
Absolute sizes: 12px, 16pt, etc.
Relative sizes: larger, smaller, 1em, 1.2rem, etc.
Percentage: 110%, 90%, etc.
The font-size property sets the size of the font.
- Example 1
- Example 2
Font size can be set using absolute or relative units. Relative units like em and rem are especially useful for responsive designs.
Font-weight
Values:
normal
bold
bolder
lighter
Numeric weights: 100, 200, … 900
The font-weight property defines the thickness of the font characters.
- Example 1
- Example 2
Besides common values like normal and bold, modern fonts might come with various weight variations represented by numbers.
Font-style
Values:
normal
italic
oblique
The font-style property specifies the style of the font.
- Example 1
- Example 2
Italic is a common style, while oblique is similar but less commonly used. They both slant the text.
Font Short-hand
Values:
Shorthand property combining font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.
The font property is a shorthand that lets you set multiple font properties in one declaration.
- Example 1
The font property can make CSS more concise. However, it’s crucial to know the specific order of values when using this shorthand.
Course Video
YouTube Reference :
1)CSS Fonts in Hindi/Urdu
