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.
- @font - face
- {
- font - family: 'olde_englishregular';
- src: url('fonts/oldenglish/olde_english_regular-webfont.eot');
- src: url('fonts/oldenglish/olde_english_regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('fonts/oldenglish/olde_english_regular-webfont.woff2') format('woff2'),
- url('fonts/oldenglish/olde_english_regular-webfont.woff') format('woff'),
- url('fonts/oldenglish/olde_english_regular-webfont.ttf') format('truetype'),
- url('fonts/oldenglish/olde_english_regular-webfont.svg#olde_englishregular') format('svg');
- font - weight: normal;
- font - style: normal;
- }
Step11: Make a class to use this font family in your website.
- .old_english_font
- {
- font - family: 'olde_englishregular'!important;
- font - size: 50px;
- }
The following is the code:
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>Web Fonts by ABHIJEET</title>
- <style>
- @font-face
- {
- font-family: 'olde_englishregular';
- src: url('fonts/oldenglish/olde_english_regular-webfont.eot');
- src:url('fonts/oldenglish/olde_english_regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('fonts/oldenglish/olde_english_regular-webfont.woff2') format('woff2'),
- url('fonts/oldenglish/olde_english_regular-webfont.woff') format('woff'),
- url('fonts/oldenglish/olde_english_regular-webfont.ttf') format('truetype'),
- url('fonts/oldenglish/olde_english_regular-webfont.svg#olde_englishregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- .old_english_font
- {
- font-family: 'olde_englishregular' !important;
- font-size: 50px;
- }
- </style>
- </head>
- <body>
- <div class="old_english_font">
- <p> Hi I am Abhijeet Singh </p>
- </div>
- </body>
- </html>
Output
![]()