Antes de começarmos, você deve saber o que é uma at-rule em CSS. At-rules são declarações que fornecem instruções para o navegador. Você pode usá-los para definir vários aspectos da folha de estilo, como media queries, keyframes, font faces e mais. You'll learn more about concepts like media queries and keyframes in future lessons. Desta vez, você vai aprender sobre a regra @font-face. Com @font-face, você pode definir uma fonte personalizada especificando o arquivo da fonte, o formato e outras propriedades importantes, como peso e estilo. Esta é a sintaxe básica. Você pode ver @font-face seguido por um bloco delimitado por chaves:

@font-face {
  /* Descriptors */
}

Dentro das chaves, você precisará incluir descritores para personalizar sua fonte. Vamos ver alguns dos mais usados comumente. O descritor font-family especifica o nome que você usará em toda a folha de estilo para se referir a essa fonte. Por exemplo, digamos que você defina esta @font-face rule. Ele tem o descritor font-family definido e seu valor é MyCustomFont:

@font-face {
  font-family: "MyCustomFont";
}

Nesse caso, você precisaria usar esse nome na sua folha de estilos sempre que quiser atribuir essa família de fonte personalizada a todos os elementos correspondentes a um seletor CSS. Por exemplo, você usaria isso como o valor de font-family:

body { 
  font-family: "MyCustomFont"; 
}

Mas para que a regra @font-face seja válida, você também precisa especificar o src. Isto contém referências aos recursos da fonte. Basicamente, é uma lista de referências externas ou nomes de fontes instaladas localmente separados por vírgulas. Também pode incluir dicas sobre o formato e a tecnologia dos recursos da fonte. No código abaixo, o src é definido. O valor é uma lista de URLs separadas por vírgulas e colocadas em linhas separadas para melhorar a legibilidade:

@font-face {
  font-family: "MyCustomFont"; 
  src: url("path/to/font.woff2"),
    url("path/to/font.woff"),
    url("path/to/font.otf");
}

Você pode chamar a função url() para incluir um arquivo na sua folha de estilos. Neste caso, estamos incluindo os arquivos de fonte. Você precisará escrever o caminho do arquivo entre parênteses e aspas, incluindo a extensão do arquivo. Para melhorar a legibilidade, você pode escrever cada recurso em uma linha diferente, mas o último deve terminar com um ponto e vírgula. Para cada recurso de fonte, você também pode especificar o formato. Isto é opcional. É uma dica para o navegador sobre o formato da fonte. Se o formato for omitido, o recurso será baixado e o formato será detectado após o download. Se o formato for inválido, o recurso não será baixado. Os formatos de fonte possíveis incluem collection, embedded-opentype, opentype, svg, truetype, woff e woff2. Aqui está um exemplo com formatos de fonte. Note como escrevemos o formato específico entre parênteses e aspas:

@font-face {
  font-family: "MyCustomFont"; 
  src: url("path/to/font.woff2") format("woff2"),
    url("path/to/font.otf") format("opentype"),
    url("path/to/font.woff") format("woff");
}

Neste exemplo, você pode ver que estamos especificando o formato WOFF2, o formato OpenType e o formato WOFF. woff significa "Web Open Font Format." A diferença entre WOFF e WOFF2 é o algoritmo usado para comprimir os dados. OpenType é um formato para fontes de computador escaláveis desenvolvido pela Microsoft e Adobe que permite aos usuários acessar recursos adicionais em uma fonte. É amplamente utilizado em grandes sistemas operacionais. Além de especificar o formato, você também pode especificar a tecnologia do recurso de fonte. Isto também é opcional. Aqui está um exemplo onde especificamos a tecnologia do segundo recurso de fonte.

@font-face {
  font-family: "MyCustomFont"; 
  src: url("path/to/font.woff2") format("woff2"),
    url("path/to/font.otf") format("opentype") tech(color-COLRv1),
    url("path/to/font.woff") format("woff");
}

Estes são os fundamentos da regra @font-face. Com esta at-rule, você pode especificar o arquivo de fonte para definir fontes personalizadas para seus designs únicos.