How to apply CSS3 FONTS on your web pages?
2021-11-16 22:39 · 11 min read
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 on our web page.
@font face rule
font-face rules allow web designers to add different font families that are not installed on your device. We can download multiple fonts families and we can use them by using the @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 the above example, we are using a font family font1.ttf. When we apply the font-face rule on our web page it changes the font style of the container font where we apply it.
Note: Always use the lowercase letter to add a font family name on your web page using the @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>Font Formats
We have many font formats 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>Font Shorthand Method
We can also use the 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}
<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>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 web pages. Following 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 from 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>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 the 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>CSS Text Shadow Property
We can use the 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>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>CSS3 Text Decoration Property
CSS3 text-decoration property is used to decorate 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>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>
