CSS Fonts



CSS Offers somany css font properties for styling the text.we can also change font family,font style,font weight and more.

The css font properties are

  • font-family
  • font-size
  • font-style
  • font-weight
  • font-variant

CSS font-family

The font-family property is used to add the font to render the text.

    body {
        font-family: Arial, Helvetica, sans-serif;
    }

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Setting font-family in CSS</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS font-size

The font-size property is used to set the font size for text.

Example

<!DOCTYPE html>
	<html>
	<head>
	<title>Defining Font Size Using Pixels</title>
	<style>  
		h1 {
			font-size: 50px;
		}
		p {
			font-size: 14px;
		}
	</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>This is a paragraph.</p>
	</body>
	</html> 
	


Click on the "Run This Code" button to see how it works.

CSS font-style

The font-style is used to add the font style for the text.

Example

<!DOCTYPE html>
	<html>
	<head>
	<title>Setting font-style in CSS</title>
	<style>
		p.normal {
			font-style: normal;
		}
		p.italic {
			font-style: italic;
		}
		p.oblique {
			font-style: oblique;
		}
	</style>
	</head>
	<body>
		<p class="normal">This is a normal paragraph.</p>
		<p class="italic">This is a paragraph with italic font style.</p>
		<p class="oblique">This is a paragraph with oblique font style.</p>
	</body>
	</html>
	


Click on the "Run This Code" button to see how it works.

CSS font-weight

The font-weight is used to define the font boldness like 100,200,300,400,500,600

Example

<!DOCTYPE html>
<html>
<head>
<title>Setting font-weight in CSS</title>
<style>
    p {
        font-weight: bold;
    }
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph in bold font.</p>
</body>
</html>


Click on the "Run This Code" button to see how it works.

CSS font-variant

The font-variant propeerty is used to the text to be displayed in a special variation.

Example

<!DOCTYPE html>
	<html>
	<head>
	<title>Setting font-variant in CSS</title>
	<style>
		p {
			font-variant: small-caps;
		}
	</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>This is a paragraph.</p>
	</body>
	</html>
	


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units