Apesar de um desenvolvedor web HTML5 pode sugerir qualquer tipo de letra de uma página web, os arquivos de fontes são, tradicionalmente, um ativo de nível do cliente. Se o cliente não tiver a fonte instalada, ela não vai vê-lo. Felizmente, CSS3 suporta uma solução sensata para fornecer fontes carregáveis.

O estilo não funciona como a maioria dos elementos CSS. Ela não se aplica marcação para alguma parte da página. Em vez disso, define um novo valor de CSS que pode ser utilizado em outras marcações. Especificamente, ele permite que você coloque um arquivo de fonte no seu servidor e definir uma família de fontes usando essa fonte.

 @ Font-face {font-family: "Miama" -src: url ( "Miama.otf") -}

o família de fontes atributo indica o nome que você estará dando este tipo de letra no resto do seu código CSS. Normalmente, ele é semelhante ao nome do arquivo fonte. o família de fontes atributo é o URL do ficheiro de fonte real, uma vez que é encontrado no servidor. Depois de uma fonte de cara foi definido, ela pode ser usada em um atributo comum no resto do seu código CSS:

 h1 {font-family: Miama-}

Aqui está o código para o exemplo de fonte personalizada:

Demo Fonte incorporado
Aqui está outra fonte personalizada

Apesar de todos os navegadores modernos apoiar o @Tipo de letra recurso, os tipos de arquivo reais suportados variam de navegador para navegador. Aqui estão os tipos de fontes primárias:

• TTF: O formato TrueType padrão é bem suportado, mas não por todos os navegadores. Muitas fontes de código aberto estão disponíveis neste formato.

• OTF: Isto é semelhante ao TTF, mas é um padrão verdadeiramente aberto, por isso é preferido por aqueles que estão interessados ​​em padrões abertos. Ele é suportado pela maioria dos navegadores exceto IE.

• WOFF: WOFF é um formato padrão proposto atualmente suportado pelo Firefox. Microsoft deu a entender que suporte este formato no IE.

• EOT: Este é o formato proprietário fonte incorporada da Microsoft. Ele só funciona no IE, mas para ser justo, a Microsoft tinha incorporado o suporte de fontes por muitos anos.

Você pode usar uma ferramenta de conversão de fontes como onlinefontconverter.com/ para converter para qualquer formato fonte que você preferir.

É possível fornecer múltiplos src atributos. Dessa forma, você pode incluir tanto um EOT e versão OTF de uma fonte para que ele irá funcionar em uma ampla variedade de navegadores.

Quando você usa essa técnica, você precisa ter uma cópia do arquivo de fonte localmente. Ele deve estar no mesmo diretório que a sua página web. Quando você começar a hospedagem em um servidor web, você vai querer mover o arquivo de fonte para o servidor junto com todos os outros recursos a sua página web necessidades. Só porque você pode incluir uma fonte não significa que você deve. Pense cuidadosamente sobre a legibilidade.

Além disso, ser respeitoso da propriedade intelectual. Felizmente, existem muitos excelentes fontes livres de código aberto disponíveis. Comece olhando Biblioteca de Fontes aberta. Fontes do Google é outro grande recurso para fontes livres. Com a ferramenta Google Font, você pode selecionar uma fonte incorporada nos servidores do Google, e você pode copiar o código que faz com que a fonte disponível sem fazer download.