@font-face é uma regra CSS que permite que os tipos de letra sejam apresentados em páginas Web na Internet. Antes de existir esta regra, os webmasters podiam utilizar um conjunto limitado de tipos de letra nos seus sítios, que são os mais comuns e estão instalados nos computadores dos utilizadores. Com o advento do @font-face, qualquer tipo de letra específico pode ser facilmente anexado a um sítio Web.
Se descarregou o tipo de letra do nosso sítio, no arquivo com os tipos de letra encontrará o código CSS pronto que deve ser copiado e colocado no documento CSS anexado ao projecto.
Instalação passo a passo
1. Seleccione o tipo de letra que pretende e clique em "transferir para o sítio Web".
2. Na raiz do seu site, crie uma pasta fonts e copie as fonts descarregadas.
Abra o seu documento CSS e copie o conteúdo do ficheiro de texto do arquivo para o mesmo.
4. Certifique-se de que o caminho para a pasta de fontes está escrito correctamente. Dependendo da posição da pasta onde se encontram os tipos de letra, o caminho pode conter um ou mais pontos.
5. Já está. Copie a propriedade com o nome da família e cole-a no selector para o qual está a escrever os estilos.
E se eu já tiver descarregado a fonte noutro local e quiser ligá-la?
Neste caso, é necessário encontrar um conversor de fontes na Internet e converter a sua fonte ttf (ou otf) para os formatos correctos, nomeadamente eot, svg, woff e woff2. Isto é para garantir que o tipo de letra é apresentado e funciona correctamente em todos os browsers, bem como em dispositivos móveis.
Depois, é necessário escrever a regra @font-face, respeitando a sua sintaxe.
A sintaxe de @font-face
A sintaxe da regra pode ser dividida, grosso modo, em propriedades básicas e propriedades avançadas.
Básico:
- font-family - especifica o nome do tipo de letra.
- src - indica o caminho do tipo de letra. Pode ser o URL do tipo de letra localizado no servidor do seu sítio Web, URLs de tipos de letra localizados no servidor de outra pessoa (como o Google Fonts), ou simplesmente o nome do tipo de letra localizado no computador do utilizador (Helvetica New Bold, Tahoma, Georgia, etc.) .
Expandido:
- font-display - determina a forma como a fonte será apresentada, dependendo de ter sido descarregada e estar pronta a ser utilizada.
- font-stretch - permite-lhe ajustar a largura do texto.
- font-style - determina se o tipo de letra é simples, itálico ou inclinado (os dois últimos não são a mesma coisa).
- font-weight - Define a saturação do tipo de letra, numa escala de 100 a 900 (100-pequeno, 900-pequeno).
- font-variant - determina como as letras minúsculas devem ser apresentadas - deixe-as inalteradas ou torne-as todas minúsculas (maiúsculas).
- font-feature-settings - permite-lhe gerir características tipográficas avançadas em tipos de letra OpenType.
- font-variations-settings - permite um controlo de baixo nível sobre variações de tipos de letra Open Type e TrueType especificando nomes de eixos de quatro letras.
- unicode-range - especifica a gama de códigos Unicode (glifos) a utilizar na fonte.
Ligar um tipo de letra ao seu sítio com o Google Fonts
A utilização do Google Fonts é a forma mais fácil de associar um tipo de letra ao seu sítio Web. Vá ao sítio Web deles, encontre o tipo de letra que pretende, escolha o tipo de letra certo para instalar e copie o código.
O código copiado deve ser colocado no corpo da etiqueta head, na sua página html.
A desvantagem deste método é que, se durante a criação do sítio tiver perdido a ligação à Internet, os tipos de letra não serão apresentados e serão substituídos por outros normais, porque os ficheiros não estão localizados no computador local, mas nos servidores do Google. Além disso, é provável que, quando se deslocar ao cliente para uma apresentação do esquema (ou apenas para confirmação) e ele não tiver Wi-Fi, o problema se repita.
