</CSS3 FONTS>

@font face rule

font face rules allows web designers to add different font families that are not installed on you device. We can download multiple fonts families and we can use them by using @font face CSS rule.

Example


<style>
@font-face{
	font-family:tdb-font;
	src:url(font1.ttf);
}
.tdb-font{
	font-family:tdb-font;
}
</style>

Here in above example we are using a font family font1.ttf. When we apply font-face rule on our web page it changes the font style of the container font where we apply it.

Note: Always use lowercase letter to add a font family name on your web page using @font-face rule.


	

<head>
<style>
@font-face{
	font-family:tdb-font;
	src:url(font1.ttf);
}
.tdb-font{
	font-family:tdb-font;
}
</style>
</head>

<body>
	<h1 class="tdb-font">TDB-FONT</h1>

</body>

Try it Yourself

Font Formats

We have many font format to use on our web page.

True Type Fonts (TTF)
The Web Open Font Format (WOFF)
The Web Open Font Format (WOFF 2.0)
Open Type Fonts (OTF)
SVG Fonts
Embedded OpenType Fonts (EOT)

Bold Text

We can use CSS3 font-weight property for bolding a text

Example
```
<style>
@font-face{
	font-family:tdb-font;
	src:url(font1.ttf);
}
.tdb-font{
	font-family:tdb-font;
	font-weight:600;
}
</style>
```
- Font Weight Possible Values
- Normal: {font-weight:400}
- bold: {font-weight:700}
- bolder: bolder than the inherited font weight
- lighter: lighter than the inherited font weight


	

<head>
<style>
@font-face{
	font-family:tdb-font;
	src:url(font1.ttf);
}
.tdb-font{
	font-family:tdb-font;
	font-weight:600;
}
</style>
</head>

<body>
	<h1 class="tdb-font">TDB-FONT</h1>

</body>

Try it Yourself

Font Shorthand Method

We can also use font shorthand method to specify all font properties in one CSS property.

Font Properties
There are many font properties available which we can use on of web pages. Following are the CSS properties of fonts.
- {font-style:value}
- {font-weight:value}
- {font-size:value}
- {line-height:value}
- {font-vatiant:value}
- {font-family:value}
```
<style>
/*shorthand property */
.tdb-class{
font: font-style font-variant font-weight 
font-size/line-height font-family
}
</style>
```


	

<head>
<style>
/*shorthand property */
.tdb-class{
font: italic small-caps bold
30px/17px Georgia, sarif;
}
</style>
</head>

<body>
	<h1 class="tdb-class">CSS Font Shorthand</h1>

</body>

Try it Yourself

CSS Text Direction

The CSS3 direction property is used to set the direction on text, horizontal flow etc.

Font Properties
There are many font properties available which we can use on of web pages. Following the the CSS properties of fonts. We use ltr for languages written from left to right direction i.e. english, and other languages and rtl for the languages written form right to left i.e. Urdu, arabic, etc.
```
<style>
/*shorthand property */
.tbd-direction{
	direction:rtl;
}
.tbd-direction{
	direction:ltr;
}
</style>
```


	

<style>
p.tdb-rtl {
  direction: rtl;
}
</style>

<body>

<h1>CSS3 direction Property</h1>

<H1>Default.</H1>

<p class="tdb-rtl">Direction right to left.</p>

</body>

Try it Yourself

CSS Text Overflow Property

The CSS3 Text Overflow property normally used for the text that can't fit in a box (container).

Property: value

text-overflow:clip; (default value)
text-overflow:ellipsis;
text-overflow:"---";


<style>
/*text-overflow example*/
.tbd-overflow{
	width:100px;
	white-space:nowrap;
	overflow:hidden;
	border:solid green 2px;
	text-overflow:ellipsis;
}

</style>

Note: User defined strings works only in Firefox web browser.


	

<style>
.tbd-common{
	width:100px;
	white-space:nowrap;
	overflow:hidden;
	border:solid green 2px;
}
.tdb-one{text-overflow:ellipsis;
}
.tdb-two{text-overflow:clip;
}
/*.tdb-three{text-overflow:"---";
}*/
</style>

<body>
<div class="tbd-common tdb-one">
CSS3 direction Property</div>
<div class="tbd-common tdb-two">
CSS3 direction Property</div>

</body>

Try it Yourself

CSS Text Shadow Property

We can use text-shadow effect on our web page. We just need to add a CSS property 'text-shadow'.

Syntax

text-shadow: h-shadow v-shadow blur color | initial | none | inherit


<style>
/*text-overflow example*/
.tbd-text{
	text-shadow:-7px -6px 3px black;
}
</style>


	

<style>
/*text-overflow example*/
.tbd-text{
	text-shadow:-3px -4px 2px green;
}
</style>

<body>
<div class="tbd-text">
CSS3 direction Property</div>
</body>

Try it Yourself

CSS3 letter-spacing and word-spacing Properties

We can use letter-spacing to give some space between texts and the word-spacing property to give some space between two words.

Syntax: px | Normal | inherit | initial

letter-spacing:5px;
word-spacing:10px;


<style>
/*example*/
.tdb-spacing{
	letter-spacing:5px;
	word-spacing:10px;
}
</style>


	

<style>
/*example*/
.tdb-spacing{
	letter-spacing:5px;
}
.tdb-word{
	word-spacing:10px;
}
</style>

<body>
<div class="tdb-spacing">
LETTER SPACING</div>
<div class="tdb-word">WORD SPACING</div>
</body>

Try it Yourself

CSS3 Text Decoration Property

CSS3 text-decoration property is used to decoreate text i.e. underlying etc.

CSS3 Syntax text-decoration: text-decoration-color text-decoration-line text-decoration-style | initial | inherit;


<style>
/*example*/
.tdb-text1 {
  text-decoration: line-through;
}
.tdb-text2 {
  text-decoration: overline;
}
.tdb-text3 {
  text-decoration: underline overline;
}
.tdb-text4 {
  text-decoration: underline;
}
</style>


	

<style>
.tdb-text1 {
  text-decoration: line-through;
}
.tdb-text2 {
  text-decoration: overline;
}
.tdb-text3 {
  text-decoration: underline overline;
}
.tdb-text4 {
  text-decoration: underline;
}
</style>

<body>
<div class="tdb-text1">TDB TUTORIALS</div><br>
<div class="tdb-text2">TDB TUTORIALS</div><br>
<div class="tdb-text3">TDB TUTORIALS</div><br>
<div class="tdb-text4">TDB TUTORIALS</div><br>
</body>

Try it Yourself

CSS3 Text indent Property

CSS3 text-indent property is used to give the indentation of the first line in an html element.

CSS3 Syntax text-indent: length | initial | inherit;


<style>
/*example*/
.tdb-indent {
  text-indent: 50px;
}
</style>


	

<style>
.tdb-indent {
  text-indent: 50px;
}
</style>

<body>
<div class="tdb-indent">TDB TUTORIALS<br>
Line 2</div><br>
</body>

Try it Yourself

</CSS3 FONTS>

</CSS3 FONTS>

@font face rule

Font Formats

Bold Text

Font Weight Possible Values

Font Shorthand Method

CSS Text Direction

CSS Text Overflow Property

CSS Text Shadow Property

CSS3 letter-spacing and word-spacing Properties

CSS3 Text Decoration Property

CSS3 Text indent Property