To include a .ttf font in a web project using CSS, you can use the @font-face rule, which allows you to load external fonts and use them throughout your site. Here's a step-by-step guide on how to include a .ttf font using CSS:
Steps to include font .ttf using CSS:
- Step 1: Download a .ttf font file from a free font website, such as Font Squirrel, FontSpace, or Google Fonts. Save the .ttf file in your project folder, preferably in a directory named fonts to keep things organized.
- Step 2: Set up an HTML file where you will apply the custom font. For example, create an index.html file:
<!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="https://www.geeksforgeeks.org/style.css">
</head>
<body>
<h2>This font is awesome</h2>
</body>
</html>- Step 3: Create a style.css file and use the @font-face rule to define the custom font. Specify the font name using the font-family property and the path to the .ttf file using the src property.
@font-face {
font-family: myFirstFont;
src: url(https://www.geeksforgeeks.org/ArianaVioleta-dz2K.ttf);
}
h2 {
font-family: myFirstFont;
color: darkgreen;
}- The ouput should be like this:
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:
