Adding .ttf and .otf fonts using CSS

TrueType is a outline font standard developed by Apple in the late 1980s as a competitor to Adobe Type 1 fonts used in PostScript. It has become the most common font format for older Mac OS, macOS, and Microsoft Windows applications and operating system.

OpenType format fonts can measure. Built on its predecessor TrueType, it retains the basic structure of TrueType and adds many complex data structures to define typographic behavior. OpenType is a registered trademark of Microsoft Corporation.

Then, if use these font on your web pages,here is the full examples how to import and use .ttf (true type fonts) and .otf (open tyep fonts) in Html using CSS.

 

Download fonts file

The .ttf and .otf format is quite famous nowadays, these font files are available for free and paid on Google. You can visit many of free websites like google fonts, da fonts,font fabrics etc.And save your fonts in one folder

To add external fonts to html, we use the @Font-face element to specify the font name and provide the source file. After that, we can access our defined font for anything needed with the font family element.

Add CSS

@font-face {

//Adding .ttf (true type font)
   font-family: fontname;
   src: url(fontname.ttf) 
   format('truetype');
}
@font-face{
//Adding .otf (open type font)
font-family: fontname;
src: url (fontname.otf)
format('opentype');
}
 
h2 {
   font-family: fontname;
   color: blue;
}

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face{
font-family: 'Praise', cursive;
src: url(praise.ttf) format('truetype');
//If your have the otf file then change the format and file name
}
h2{
font-family: 'Praise', cursive;
color:blue;
</style>
</head>
<body>
 <h2>Welcome To KrTricks</h2>
</body>
</html>

Output

Font style

 

Leave a Comment

Your email address will not be published.