How to Embed TTF Fonts in CSS (4 Steps)

Open the HTML file for the Web page where you wish to display the embedded font. For websites or templates using a separate header file, open that instead. Use a code-editing program such as Notepad++, jEdit or BBEdit. Look for the following line of code in the top of your HTML file:
Look at the name of the .CSS file referenced in the
tag and open that file in your code editor. If you see no
tag, create one and then create a blank .CSS file.
Add the following code at the top of your .CSS file:@font-face {font-family: 'Font Name Here';src: URL('fontfile.ttf') format ('ttf');}Give a font family name to your font. You can use any name, but stick with a name that is easy to type and remember. Type the full or relative path to your .TTF file between the parentheses after 'URL.'
Use the embedded font as you would use a Web-safe font such as Arial, Helvetica or Georgia. Here is an example:h1 {font-family: 'Font Name Here', 'Another Font', generic;}The above code makes all tags use your embedded font. Should the embedded font not work, the browser will use 'Another Font' for level-one headers. In the case 'Another Font' does not exist on the user's computer, the browser goes to the last font. Use a generic family name here such as 'serif' and 'sans-serif.'
Upload your font using an FTP tool. If you do not use FTP, you can also log into your Web hosting control panel and then navigate to your file management tool. Most Web hosts offer this tool, which allows you to upload a few files at a time through your browser.
VPS Hosting