To use local font in HTML using font face

Question

I trying to use local font to apply styles in html, below is the code.Font is not getting applied for harlow class used element

Answer 1

Use font face in all the format types according to the browser compatibility

- Just add bellow code before all the styling of your css file and then you can use this font family for any selector inside within your css file.

@font-face {
         font-family: 'CustomHeading';
         src: url('./fonts/SFAtarianSystem.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/SFAtarianSystem.ttf') format('woff2'), /* Super Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf') format('woff'), /* Pretty Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('./fonts/SFAtarianSystem.ttf') format('svg'); /* Legacy iOS */
}