Put external font on website

Question

I have a font that I need to put on the site (edosz.ttf), I have been searching and I ended up with this code:

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

but I can’t! Someone could help me?

Answer 1

To add a font 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 source installed on your system:

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

The 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')

This is the format that makes the @font-face IE7/8/9 compatible.

Navigator 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.

---

In case you need a converter I use this one: Everything Fonts

Example of more intense browser support.

@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 */
}

Answer 2

For the code below, the source must be in the same folder as the CSS file, if it is in a different directory it is necessary to reference it correctly.

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

Answer 3

In addition to the code of font-face you need to assign it to some selector in 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;
}