The Developer Brains


CSS3 FONTS

Web Designing | Web Development


SEE MORE














</CSS3 FONTS>





CSS3 allows web designers to use multiple types of font families on a single web page. We can also link font families online i.e. google fonts. In this Tutorial we will learn how to use CSS3 @font rule and google fonts in our web page.


SEE MORE
























</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





















Is True Type Fonts (TTF) a font format or not?.
1. yes
2. no




Check Now



CSS3 QUIZ







Next: CSS3 Box-shadow Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers