How to Include a Font .ttf using CSS?

Last Updated : 09 Oct, 2024

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="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(ArianaVioleta-dz2K.ttf);
}
  
h2 {
    font-family: myFirstFont;
    color: darkgreen;
}

The ouput should be like this:

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: