Post
Ask Question

Generating WebFonts Using (TTF) HTML5 in Website Development

Introduction

 
For this we need to generate web fonts using a TTF file. 
 
Here in this article we'll learn how web fonts are generated and how they are used.
 
Step 1: Download the True Type Fonts TTF of the desired font style.
 
 
Step 2: Go to any web font generator website. For example fontsquirrel.com.
 
 
Step 3: Upload that (.ttf) file of fonts to that website.
 
 
Step 4: Click on Generate Web Fonts or just upload the required font, It will automatically generate the kit.
 
 
Step 5: Download the complete Zip file.
 
 
Step 6: Extract the Zip file.
 
Step 7: Open the .css file.
 
Step 8: Copy the entire folder to your CSS folder in your project.
 
Step9: Copy the code of the font CSS (stylesheet.css) and ensure that you have given the correct URLs for all formats.
 
Step10: For example, Old English regular fonts.
  1. @font - face  
  2. {  
  3.     font - family: 'olde_englishregular';  
  4.     src: url('fonts/oldenglish/olde_english_regular-webfont.eot');  
  5.     src: url('fonts/oldenglish/olde_english_regular-webfont.eot?#iefix') format('embedded-opentype'),  
  6.     url('fonts/oldenglish/olde_english_regular-webfont.woff2') format('woff2'),  
  7.     url('fonts/oldenglish/olde_english_regular-webfont.woff') format('woff'),  
  8.     url('fonts/oldenglish/olde_english_regular-webfont.ttf') format('truetype'),  
  9.     url('fonts/oldenglish/olde_english_regular-webfont.svg#olde_englishregular') format('svg');  
  10.     font - weight: normal;  
  11.     font - style: normal;  
  12. }  
Step11: Make a class to use this font family in your website.
  1. .old_english_font  
  2. {  
  3.     font - family: 'olde_englishregular'!important;  
  4.     font - size: 50px;  
  5. }  
The following is the code:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head lang="en">  
  4.         <meta charset="UTF-8">  
  5.             <title>Web Fonts by ABHIJEET</title>  
  6.             <style>  
  7. @font-face  
  8. {  
  9.     font-family: 'olde_englishregular';  
  10.     src: url('fonts/oldenglish/olde_english_regular-webfont.eot');  
  11.     src:url('fonts/oldenglish/olde_english_regular-webfont.eot?#iefix') format('embedded-opentype'),  
  12.     url('fonts/oldenglish/olde_english_regular-webfont.woff2') format('woff2'),  
  13.     url('fonts/oldenglish/olde_english_regular-webfont.woff') format('woff'),  
  14.     url('fonts/oldenglish/olde_english_regular-webfont.ttf') format('truetype'),  
  15.     url('fonts/oldenglish/olde_english_regular-webfont.svg#olde_englishregular') format('svg');  
  16.     font-weight: normal;  
  17.     font-style: normal;  
  18. }  
  19. .old_english_font   
  20. {  
  21.     font-family: 'olde_englishregular' !important;  
  22.     font-size: 50px;  
  23. }  
  24. </style>  
  25.         </head>  
  26.         <body>  
  27.             <div class="old_english_font">  
  28.                 <p> Hi I am Abhijeet Singh </p>  
  29.             </div>  
  30.         </body>  
  31.     </html>  
Output
 
 

Conclusion

 
In this article, we studied Generating WebFonts Using (TTF) HTML5 in Website Development.


Similar Articles