11

Gostaria usar uma fonte da Google sem precisar de Conexão (internet). Vi que o @font-face tem esse poder. Basta apenas baixar a fonte em um dos formatos (preferi o .EOT por também ser aceito pelo IE Browser) e declarar da seguinte forma:

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/VT323-Regular.eot');
  src: url('../fonts/VT323-Regular.eot?#iefix') format('embedded-opentype'),
       url(‘../fonts/VT323-Regular.ttf’) format(‘truetype’);
}   

Onde url é onde está localizado o arquivo da fonte. E para fazer uso dela deve-se apenas chamar o font-family, obviamente, com o nome declarado no @font-face:

.home-text {
    font-family: 'VT323', cursive;
    text-align: center;
    font-size: 1.4em;
}

Contudo, ainda não consigo gozar da fonte VT323. Os códigos acima são originais do meu projeto. Segue abaixo a estrutura dos diretórios dos arquivos (informação adicional):

estrutura de diretórios

12

2 Respostas 2

3

o SkyFonts permite você sincronizar fontes do GoogleFonts com seu Desktop.

No MAC OS X o SkyFonts baixa os fontes para a pasta ~/Library/Application Support/skyfonts-google e você pode copiar para a pasta /css/fonts do seu site.

Obviamente você não precisa usar SkyFonts, basta fazer o Download. Eu uso por comodidade na gestão de Fonts nos meus Computadores.

Agora ao problema do VT323. O procedimento abaixo eu testei no Chrome e Safari.

Crie um arquivo css em /css/vt323.css com o seguinte conteúdo:

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local('VT323'), local('VT323-Regular'), url(VT323-Regular.ttf) format('ttf');
}

No seu HTML coloque as seguintes linhas de código no <head>:

<link href="/css/vt323.css" rel="stylesheet">
<style>
  body {
    font-family: VT323;
  }
</style>

Abaixo uma ilustração de como pesquisar e sincronizar o fonte VT323 com seu Desktop usando o SkyFonts.

Usando o SkyFonts

2
  • Mas isso seria tudo feito localmente? 18/02/2014 às 12:57
  • Na minha proposta de solução eliminamos a dependência do usuário com uma conexão com a Internet para baixar os fontes de um site tal como o fonts.googleapis.com. Recentemente tive de fazer isso para evitar que a página congelasse numa Intranet devido a queda do link com a Internet. 18/02/2014 às 13:14
0

Já tentou o IcoMoon?

Tem ótimos recursos para editar e baixar arquivos de fontes. Eu uso primariamente para criar ícones como fontes mas acredito que possa ser usado como fontes para escrever textos (bem, na pior das hipoteses você terá que "desenhar" as letras que você vai precisar).

Tem bons exemplos e talvez você possa usar como referência.

1
  • 1
    Não pretendo driblar o problema, quero resolve-lo! 14/02/2014 às 21:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .