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 :