@font-face
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
O **`@font-face`** CSS at-rule especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário.

Se a função `local()` for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a user agent (en-US) encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função `url()` é baixado e usado.

Ao permitir que os autores forneçam suas próprias fontes, `@font-face` torna possível projetar conteúdo sem se limitar às chamadas fontes "seguras para a web" (ou seja, as fontes que são tão comuns que são consideradas como universalmente disponível). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte além do básico, ao mesmo tempo em que é possível fazê-lo sem depender de uma conexão com a Internet.

É comum usar `url()` e `local()` juntos, para que a cópia instalada da fonte do usuário seja usada, se disponível, voltando ao download de uma cópia da fonte, caso ela não seja encontrada no dispositivo do usuário.

A regra de CSS `@font-face` pode ser usada não apenas no nível superior de um CSS, mas também dentro de qualquer CSS conditional-group at-rule.


```css
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

Sintaxe
-------

### Descritores

`font-display` (en-US)

Determina como uma fonte é exibida, com base em se e quando é baixada e pronta para uso.

`font-family` (en-US)

Especifica um nome que será usado como o valor nominal da fonte para as propriedades da fonte.

`font-stretch` (en-US)

Um valor `font-stretch` (en-US). Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo, extensão de fonte: `font-stretch: 50% 200%;`

`font-style` (en-US)

Um valor `font-style` (en-US). Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo `font-style: oblique 20deg 50deg;`

`font-weight` (en-US)

Um valor de `font-weight`. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo `font-weight: 100 400;`

`font-variant` (en-US)

Um valor `font-variant` (en-US).

`font-feature-settings`

Permite o controle sobre recursos tipográficos avançados em fontes OpenType.

`font-variation-settings` (en-US)

Permite o controle de baixo nível sobre as variações de fonte OpenType ou TrueType, especificando os nomes dos quatro eixos das letras dos recursos para variar, juntamente com seus valores de variação.

`src` (en-US)

Especifica o recurso que contém os dados da fonte. Pode ser um URL para um local de arquivo de fonte remota ou o nome de uma fonte no computador do usuário.

Para fornecer ao navegador uma dica sobre o formato de um recurso de fonte - para que ele possa selecionar um adequado - é possível incluir um tipo de formato dentro de uma função `format()`:


```css
src:
  url(ideal-sans-serif.woff) format("woff"),
  url(basic-sans-serif.ttf) format("truetype");
```


Os tipos disponíveis são: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, e `"svg"`.

`unicode-range` (en-US)

O intervalo de pontos de código Unicode a serem usados na fonte.

### Sintaxe formal
```

@font-face =   
  @font-face { <declaration-list> }    
  
```

Exemplos
--------

Este exemplo simplesmente especifica uma fonte para download a ser usada, aplicando-a a todo o corpo do documento:

Veja este exemplo


```css
@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}

p {
  font-family: "Bitstream Vera Serif Bold", serif;
}
```



```html
<p>This is Bitstream Vera Serif Bold.</p>
```


Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o usuário não tiver essa fonte instalada (dois nomes diferentes são tentados), a fonte para download denominada "MgOpenModernaBold.ttf" será usada:


```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

Font MIME Types
---------------

| Formato | MIME type |
| --- | --- |
| TrueType | `font/ttf` |
| OpenType | `font/otf` |
| Web Open File Format | `font/woff` |
| Web Open File Format 2 | `font/woff2` |

Notes
-----

* As fontes da Web estão sujeitas à mesma restrição de domínio (os arquivos de fonte devem estar no mesmo domínio da página que os utiliza), a menos que os Controles de Acessos HTTP (en-US) sejam usados para relaxar essa restrição.
* `@font-face` não pode ser declarado dentro de um seletor CSS. Por exemplo, o seguinte não funcionará:

```css
.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* About WOFF (en-US)
* Everythingfonts font-face generator
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Open Font Library
* When can I use WOFF?
* When can I use SVG Fonts?
* Free Fancy Cool Fonts