Como instalo uma fonte personalizada em um site HTML


153

Não estou usando flash ou php - e me pediram para adicionar uma fonte personalizada a um layout HTML simples. "KG bug de junho"

Eu o baixei localmente - existe um truque simples de CSS para fazer isso?

Respostas:


276

Sim, você pode usar o recurso CSS chamado @ font-face. Ele foi aprovado apenas oficialmente no CSS3, mas foi proposto e implementado no CSS2 e é suportado no IE há bastante tempo.

Você o declara no CSS assim:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Em seguida, você pode apenas referenciá-lo como as outras fontes padrão:

 h3 { font-family: Delicious, sans-serif; }

Então, neste caso,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

E você só precisa colocar o JUNEBUG.TFF no mesmo local que o arquivo html.

Eu baixei a fonte do site dafont.com :

http://www.dafont.com/junebug.font


1
desculpe se do "dever de casa" o que faria o olhar um código como se eu usasse este tipo de letra JUNEBUG para apenas o texto simples
adam

Eu não sabia que você poderia fazer isso. Também funciona em outros navegadores?
Julien Bourdon


Não funciona para mim, minha fonte está na mesma pasta que minha página php.
preto

1
O caminho @Black especificado em urlé relativo ao local do seu arquivo css .
Alex Semeniuk

17

Para o melhor suporte possível ao navegador, seu código CSS deve ficar assim:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Para mais informações, consulte o artigo Using @ font-face em CSS-tricks.com .


17

Você pode usar o @ font-face na maioria dos navegadores modernos.

Aqui estão alguns artigos sobre como ele funciona:

Aqui está uma boa sintaxe para adicionar a fonte ao seu aplicativo:

Aqui estão alguns lugares para converter fontes para uso com @ font-face:

O cufon também funcionará se você não quiser usar o font-face, e ele possui uma boa documentação no site:


9

Tente isto

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}
 <div class="FontMarket">KhonKaen Market</div>

vilis.org


4

Se você estiver usando uma folha de estilos externa, o código poderá ser algo assim:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

E deve ser salvo em um arquivo .css separado (por exemplo, styles.css). Se o arquivo .css estiver em um local separado do código da página, o arquivo de fonte real deverá ter o mesmo caminho que o arquivo .css, NÃO o arquivo de página da web .html ou .php. Em seguida, a página da web precisa de algo como:

<link rel="stylesheet" href="css/styles.css">

na seção <head> da sua página html. Neste exemplo, o arquivo de fonte deve estar localizado na pasta css junto com a folha de estilo. Depois disso, basta adicionar class = "junebug" dentro de qualquer tag em seu html para usar a fonte Junebug nesse elemento.

Se você estiver colocando o css na página da web real, adicione a tag style no cabeçalho do html, como:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

E o estilo do elemento real pode ser incluído no item acima <style>e chamado por elemento por classe ou ID, ou você pode simplesmente declarar o estilo alinhado com o elemento. Por elemento, quero dizer <div>, <p>, <h1> ou qualquer outro elemento no html que precise usar a fonte Junebug. Com essas duas opções, o arquivo de fonte (Junebug.ttf) deve estar localizado no mesmo caminho da página html. Dessas duas opções, a melhor prática seria:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

e

<h1 class="junebug">This is Junebug</h1>

E a maneira menos aceitável seria:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

e

<h1 style="font-family: Junebug;">This is Junebug</h1>

A razão pela qual não é bom usar estilos embutidos é a melhor prática que determina que os estilos devem ser mantidos em um único local, para que a edição seja prática. Essa também é a principal razão pela qual recomendo usar a primeira opção de usar folhas de estilo externas. Eu espero que isso ajude.


-1

existe uma maneira simples de fazer isso: no arquivo html, adicione:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

Nota: você coloca o nome do arquivo .ttf que possui. então vá para o seu arquivo css e adicione:

h1 {
    color: blue;
    font-family: vermin vibes;
}

Nota: você coloca o nome da família da fonte que você possui.

Nota: não escreva o nome da família da fonte como seu font.ttf nome exemplo: se o seu nome da fonte.ttf for: "vermin_vibes.ttf", sua família de fontes será: "vermin vibes" a família de fontes não contém caracteres especiais como "-, _" ... etc, apenas pode conter espaços.


Você realmente deve defini-lo como font-faceCSS, em vez de exigir um arquivo ttf.
Arcath

ele não é obrigado a fazê-lo, você pode simplesmente fazê-lo assim que eu sempre fazê-lo de duas maneiras e ambas as obras
Abbass Sharara

@ Arcath Por que é melhor usar o font-face?
Antonio Araujo
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.