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?

html css fonts webfonts Adão
fonte

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

Nicolas Modrzyk
fonte
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
1
Funciona em qualquer decente navegador: webfonts.info/wiki/index.php?title=@font-face_browser_support
Nicolas Modrzyk
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 .

John Slegers
fonte
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:

nheinrich
fonte
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>
Expandir snippet

vilis.org

SIAMWEBSITE
fonte
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.

Richard Stitz
fonte
-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.

Abbass Sharara
fonte
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