How to include a font .ttf using CSS ?
Adding .ttf fonts using CSS: In the late 1980s, after getting beaten by adobe’s type 1 fonts, Apple came up with a new font format type which is .ttf(True Type Font). These fonts were so awesome that, they become the most common font formats all over the world in a very short time. In fact, windows itself started using them in there operating system.
Then, if you wish to use these font formats in your web pages, here is a detailed step by step explanation, how to import and use .ttf(true type fonts) in Html using CSS.
1. Download .ttf format file: 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.
2. Create a HTML file: Create a HTML file and add a h2 tag for demonstrating our font style.
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> <h2>This font is awesome</h2></body></html> |
3. Create a CSS file: For adding external fonts through CSS, we use the @Font-face attribute property to manually define font name and giving 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;
}Final result: This is how our font look on the browser
font in browser
If you didn’t catch the idea in the above example, let’s try with another font style.
HTML File:
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 File:
@font-face {
font-family: myFirstFont;
src: url(ChrustyRock-ORLA.ttf);
}
h2 {
font-family: myFirstFont;
color: darkgreen;
}
Output:
2nd example with a new font
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...