VOOZH about

URL: https://www.geeksforgeeks.org/css/how-to-include-a-font-ttf-using-css/

⇱ How to Include a Font .ttf using CSS? - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

How to Include a Font .ttf using CSS?

Last Updated : 23 Jul, 2025

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:
👁 Image
font in browser

Example: In this example, we are trying different font.

Output:

👁 font-ttf-using-css


Supported Browser

Comment
Article Tags: