Custom fonts in CSS
Fonts that are bundled with browsers are not sufficient sometimes, In order to use some other 3rd party or custom fonts we have to follow some steps as :
Step 1
Download any font files say Roboto here, which we have downloaded from Roboto Font.
Step 2
Place these font files into your home directory or any directory.
Step 3
Define this font in CSS as:
<style>
@font-face { /* specifying font face file location */
font-family: Roboto; /* fonmt face name, to be used where we want*/
src: local('Roboto-Thin'), url("Roboto-Thin.ttf");
/* you can also use fonts with full url as */
/*
src: local('Roboto-Thin'), url("http://www.loopandbreak.com/wp-content/themes/mytheme/fonts/Roboto-Thin.ttf");
*/
}
</style>
Step 4 (Complete Example)
<!DOCTYPE HTML>
<html>
<head>
<title>Custom Fonts</title>
<style>
@font-face
{ /* specifying font face file location */
font-family: Roboto; /* fonmt face name, to be used where we want*/
src: local('Roboto-Thin'), url("Roboto-Thin.ttf");
/* you can also use fonts with full url as */
/*
src: local('Roboto-Thin'), url("http://www.loopandbreak.com/wp-content/themes/mytheme/fonts/Roboto-Thin.ttf");
*/
}
</style>
</head>
<body>
<!-- With Normal fonts -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>
<!-- Using Roboto font with font family -->
<p style="font-family: Roboto;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce
posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.</p>
</body>
</html>
Output :
