Você pode fazer de dois jeitos:
1 - Possuir a fonte localmente
Fazer o download da fonte, salvar no seu projeto e referenciar no CSS:
@font-face {
font-family: "Open Sans";
src: url("OpenSans.woff");
}
E utilizar o nome que está em font-family
no resto do arquivo CSS.
Lembrando que existem fontes gratuitas e pagas. Um bom site é o Font Squirrel.
Exemplo da Open Sans
Você escolhe os estilos que você quer e ele te gera um link. Neste link, tem os @font-face
definidos conforme você escolheu antes. A partir daí, basta colocar este link no head
e usar a fonte normalmente.
Exemplo:
body {
font-family: "Open Sans";
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>Texto na fonte Open Sans</h1>
Sobre compatibilidade
Existem vários formatos de fonte: WOFF, WOFF2, TTF, SVG, EOT, OTF, e nem todos os navegadores suportam todos estes tipos. A melhor maneira de garantir compatibilidade com todos os navegadores, é possuir a fonte em todos estes formatos (você pode colocar vários url()
no @font-face
, um para cada arquivo).
Se você não liga pra IE8-, utilize WOFF, que possui compatibilidade com IE9+ e os principais navegadores, inclusive móveis.
Acredito que a melhor maneira ainda é deixar a responsabilidade com o Google Fonts, pois além de usar cache, normalmente ele garante a compatibilidade.
@font-face { font-family: "Nome-da-Fonte"; src: url("caminho da fonte"); /* para IE */ src: local("nome-da-fonte"), url("caminho da fonte") format("opentype"); }