add ttf font to csss and use it html

1@font-face {
2  font-family:"Name-Of-Font";
3  src: url("yourfont.ttf") format("truetype");
4}
5

1Step 1: Download the font
2Find the custom font you want to use on your website, and then download the TrueType Font file format (.ttf). You can also download the OpenType Font format (.otf)
3
4Step 2: Create a WebFont Kit for cross-browsing
5Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.
6
7Step 3: Upload the font files to your website
8Using your FTP or file manager, upload all the font files found within your Web Font Kit to your website.* Typically this kit will include multiple file extensions such as (.eot), (.woff), (.woff2), (.ttf) and (.svg).
9
10Your kit will also include a Cascading Style Sheet (.css) that you will need to update and upload in step 4.
11
12*This step will vary greatly based upon how your website is built and hosted.
13
14Step 4: Update and upload your CSS file
15Open the CSS file in a text editor such as Textedit, NotePad or Sublime.
16
17Replace the existing source URL with the new URL you created by uploading each file.
18
19By default, the source URL location is set within the downloaded Web Font Kit. It needs to be replaced by the location on your server.
20
21Here’s a quick example:
22
23Before update:
24
25@font-face {
26font-family: "CustomFont";
27src: url("CustomFont.eot");
28src: url("CustomFont.woff") format("woff"),
29url("CustomFont.otf") format("opentype"),
30url("CustomFont.svg#filename") format("svg");
31}
32
33 
34
35After update:
36
37@font-face {
38font-family: "CustomFont";
39src: url("https://yoursite.com/css/fonts/CustomFont.eot");
40src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
41url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
42url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
43}
44
45Once you’ve updated the CSS file, you need to upload it to your website (server).
46
47Step 5: Use the custom font in your CSS declarations
48Now that your Cascading Style Sheet and font files are uploaded to your server, you can start using your custom font in your CSS declarations to help improve the look of the HTML.
49
50This can be done in multiple ways, including adding site-wide declarations to your main CSS file.
51
52Here is a quick example:
53
54h1 {
55font-family: 'CustomFont', Arial, sans-serif;
56font-weight:normal;
57font-style:normal;
58
59
60// https://www.fontsquirrel.com/tools/webfont-generator