Using @font-face in css

@font-face allows users to use custom fonts. When defined in css, it means to let the browser download the specified font and display it. Definitions need to be placed at the beginning of the file.
Font files come in many formats. Some browsers only support certain formats.

The following definitions can be supported by the most compatible browsers:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Then you can use:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

-

https://css-tricks.com/snippets/css/using-font-face/
--




-