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.