In this article, we are going to learn how to include a font .ttf using CSS. In the late 1980s, after getting beaten by Adobe’s type 1 font, Apple came up with a new font format type which is .ttf(True Type Font). These fonts were so awesome that, they became the most common font formats all over the world in a very short time. In fact, windows itself started using them in their operating system.
Steps to include font .ttf using CSS:
- Step 1: The .ttf format is quite famous nowadays, these font files are available for free on Google. You can visit Font Space, Font Squirrel, etc websites that provide these fonts for free. Keep all the files in the same folder.
- Step 2: Create an HTML file and add a h2 tag to demonstrate our font style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>This font is awesome</h2>
</body>
</html>
- Step 3: For adding external fonts through CSS, we use the @Font-face attribute property to manually define the font name and give the source file. Afterward, we can access our defined font in any element required with Font-family property.
@font-face {
font-family: myFirstFont;
src: url(ArianaVioleta-dz2K.ttf);
}
h2 {
font-family: myFirstFont;
color: darkgreen;
}
- The ouput should be like this:
font in browser
Example: In this example, we are trying different font.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>The font on this paragraph looks awesome</p>
</body>
</html>
|
CSS
@font-face { font-family: myFirstFont;
src: url(ChrustyRock-ORLA.ttf);
} h2 {
font-family: myFirstFont;
color: darkgreen;
} |
Output:
example with a new font
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari