How to include a font .ttf using CSS ?
To include a font .ttf using CSS, use the @font-face rule, specifying the font file path with the src property. Then, apply the font-family property to elements to utilize the custom font.
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.
<!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>
@font-face {
font-family: myFirstFont;
src: url(ChrustyRock-ORLA.ttf);
}
h2 {
font-family: myFirstFont;
color: darkgreen;
}
Output:
Supported Browser:
Contact Us