FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 919

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>

 

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer