CSS Font property use to design font
11-05-2017    389 times
CSS Font property

CSS Font property

Font-Family property : CSS Font property

font-family property set the font of the text in the web page. We should mention more than one font in a row. Because if browser cannot find the first font then it try to find the second one and so on. this process known as "fallback". In this case we start with the font which we are want to use and end with a generic family.

Note: The multi word font name like Monotype Corsiva should be written as "Monotype Corsiva". i.e. under a quotation marks.

CSS CODE

DIV
{
font-family:'monotype corsiva',Verdana, Arial, Helvetica, sans-serif;
}

Tutorial at home

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Font Family Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. </div>
</body>
</html>

Font Family
Font Family

Note: Some time our given font are not found on every machine then browser choose the generic font. That may cause the look of the web pages are change. To slove this problem now developers used google font. We just connect a css file of google.com by the following syntax. Through URL parameters, we specificify which fonts we want, and what variations of those fonts.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
Tutorial at home

That may create another problem, If google.com server is down for some reson then our site will aslo stop. To avoid this situation we can downloading the stylesheet and copy-and-pasting the @font-face stuff into our main stylesheet. But we also lost the all update from google.

After linking this file we can able to write the following code into out CSS file

body
{
font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif;
font-size: 48px;
}

Font Style : CSS Font property

The font-style property is used to set the font style of the text.

There are three types of style is:

  • normal - normal font
  • italic - italics font
  • oblique - oblique is same as italic, but not supported by every browser.

CSS CODE

DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.normal
{
font-style: normal;
}

.italic
{
font-style: italic;
}

.oblique
{
font-style: oblique;
}

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Font Family Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="normal"> This is a demo text. &lt;&lt;- Normal </div>
<div class="italic"> This is a demo text. &lt;&lt;- Italic</div>
<div class="oblique"> This is a demo text. &lt;&lt;- Oblique</div>
</body>
</html>

Font Style
Font Style

Font Size : CSS Font property

font size of the text is set by the font-size properties of CSS.

Note: we can set the size of the any HTML tag like Heading(H1, H2, ...), Paragraph etc. But we ethically not allowed to adjust the font as pragraph look like heading and heading look like paragraph. We must follow the basic sequence of the font that is, <H1>....<h2>, <p>.

Note: The default font size for paragraph, is 16px or 1em.

Font size are two types

Absolute size : It is used for the known physical output.
Relative size : It is used when user want to change the font size according to the size of the output devices.

CSS CODE

DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.SizeInPx
{
font-size: 40px;
}

.SizeInEm
{
font-size: 1.5em; /* 24px/16=1.5em */
}
.SizeInPercentage
{
font-size: 100%;
}

Tutorial at home
Tutorial at home

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Font Family Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="SizeInPx"> This is a demo text. &lt;&lt;- Size In Px </div>
<div class="SizeInEm"> This is a demo text. &lt;&lt;- Size In Em</div>
<div class="SizeInPercentage"> This is a demo text. &lt;&lt;- Size In Percentage</div>
</body>
</html>

Font Size
Font Size

Font Weight : CSS Font property

The boldness of the text is set by the font-weight property of CSS

CSS Code

DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.normal
{
font-weight: normal;
}

.Heavy
{
font-weight: bold;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Font Weight Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="normal"> This is a demo text. &lt;&lt;- normal </div>
<div class="Heavy"> This is a demo text. &lt;&lt;- Heavy</div>
</body>
</html>

Font Weight
Font Weight

Font Variant : CSS Font property

Whether the text in a web page displayed in a small-caps format or normal format is determined by font-variant property of CSS.

CSS CODE

DIV
{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.normal
{
font-variant: normal;
}

.small
{
font-variant: small-caps;
}

Tutorial at home
Tutorial at home

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Font Variant Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="normal"> This is a demo text. &lt;&lt;- normal </div>
<div class="small"> This is a demo text. &lt;&lt;- Small Caps</div>
</body>
</html>

Font Variant
Font Variant
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post