Embora um desenvolvedor web HTML5 pode sugerir qualquer tipo de letra para 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 a marcação para alguma parte da página. Em vez disso, ele define um novo valor de CSS que pode ser usado em outra marcação. 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 arquivo de fonte real, uma vez que é encontrado no servidor. Depois de um font-face foi definido, ele pode ser usado 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:

Video: Curso de HTML5 e CSS3 - 19 - font-face, font-family altere as fontes do site (01)

Demo Fonte incorporado
Aqui está outra fonte personalizada

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

Video: Curso de HTML5 e CSS3 - 17 - Como criar Favicon em html5

• 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. É apoiado pela maioria dos navegadores exceto IE.

  Video: Tutorial XHTML e CSS Parte 17 - RGB, W3C e Fontes

• WOFF: WOFF é um formato padrão proposto atualmente suportado pelo Firefox. Microsoft deu a entender a apoiar 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 para muitos anos.

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

Video: Como Utilizar Fontes Personalizadas em Seu Site Com o Cufon

É 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 juntamente 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 Fonte 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 a fonte disponível sem fazer download.