How to use .otf fonts on web browsers ?
Last Updated :
22 Mar, 2023
OpenType Font (.otf) is a font format that was developed by Microsoft and Adobe. It is an extended version of the TrueType font format and it supports advanced typographic features like ligatures, small caps, and many more.
It is more widely preferred over another font format because it is over better cross-platform compactness and includes a wider range of typographic features. OTF can be created using various software tools, including font editors like FontForge. It is widely used in graphic design web design and desktop publishing applications. Â Â
Syntax:
@font-face {
font-family: 'MyFont';
src: url('path/to/MyFont.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
Â
Approach:
- First, declare the .otf font using @font-face and specify its name and file path.
- The font-family property is used to illustrate that the font is to be used for all the text on the page.
- The file path mentioned in the @font-face rule will need to be adjusted to match the actual file address on the server.
Example 1: This example describes the basic usage of the .otf fonts on web browsers.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="name">GeeksforGeeks</h1>
</header>
<main>
<h2>About Us</h2>
<p>We are GfG</p>
<h2>Our Services</h2>
<ul>
<li>Web design</li>
<li>Web development</li>
<li>DSA</li>
</ul>
</main>
</body>
</html>
|
CSS
@font-face {
font-family: 'MyFont';
src:
url('path/to/CarandaPersonalUse-qLOq.ttf')
format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'CarandaPersonalUse-qLOq.ttf', sans-serif;
text-align: center;
}
header {
background-color: #333;
text-align: center;
color: green;
padding: 20px;
font-size: large;
}
main {
padding: 20px;
}
|
Output:
Â
Example 2: This is another example that describes the use of the .otf fonts on web browsers.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>GeeksforGeeks</header>
<main>
<p>
This is a paragraph written in otf format .
</p>
</main>
</body>
</html>
|
CSS
@font-face {
font-family: 'MyFont';
src: url('path/to/MyFont.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyFont', sans-serif;
text-align: center;
}
header {
background-color: #333;
text-align: center;
color: green;
padding: 20px;
font-size: large;
}
main {
padding: 20px;
}
|
Output:
Â
Note: In order to see the different font formats in the output, you need to download it on your local machine, & then locate & set the path for the downloaded font file in the URL.
Share your thoughts in the comments
Please Login to comment...