Put external font on site

To add a source to your site you will use the css rule called @font-face .

Browser support for: @ font-face .

@font-face{
    font-family: NomeDaFonte;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("ArquivoDaFonte.eot");
}

Remembering that the path depends on the location of the file.

 @font-face{ 
    /*Caso a fonte esteja dentro de uma pasta*/
     src: url("/pasta/ArquivoDaFonte.eot");

    /*Caso a fonte esteja na pasta anterior*/
     src: url("../ArquivoDaFonte.eot");
}

If you want to check if the user has the font installed on your system:

@font-face {
    src: local(ArquivoDaFonte.eot), url(ArquivoDaFonte.eot);
}

Fonts have some formats.

TrueType - .ttf

format ('embedded-opentype')

OpenType - .ttf, .otf

format ('embedded-opentype')

Browser Support for: TTF / OTF .

TrueType with Apple Advanced Typography extensions - .ttf

format ('embedded-opentype')

Embedded OpenType - .eot

format ('embedded-opentype')

It is the format that leaves @ font-face compatible with IE7 / 8/9.

Browser support for: EOT .

SVG Font - .svg, .sgvz

format ('embedded-opentype')

Browser Support for: SVG .

WOFF2 - .woff2

format ('woff2')

Brings a reduction of approximately 30% of the file size.

Browser support for: WOFF2 .

If you need a converter I use this one: Everything Fonts

Example of more intense support for browsers.

@font-face {
    font-family: 'NomeDaFonte';
    src: url('ArquivoDaFonte.eot'); /* IE9 */
    src: url('ArquivoDaFonte.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('ArquivoDaFonte.woff2') format('woff2'), /* Browsers de ponta */
        url('ArquivoDaFonte.woff') format('woff'), /* Browsers atualizados */
        url('ArquivoDaFonte.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('ArquivoDaFonte.svg#NomeDaFonte') format('svg'); /* iOS */
}

For the code below, the font should be in the same folder as the CSS file, if it is in a different directory you need to reference it correctly.

@font-face{
  font-family: "edosz";
  src: url('edosz.ttf') format('truetype');
}

In addition to the code of font-face you need to assign it to some selector in the css like:

Your @ font-face

@font-face{
  font-family: "edosz";
  src: url('edosz.ttf');
}

Assigning the new font to a page element:

body {
    font-family: edosz;
}