¿Cómo instalo una fuente personalizada en un sitio HTML?

153

No estoy usando flash o php, y me han pedido que agregue una fuente personalizada a un diseño HTML simple. "KG June Bug"

Lo descargué localmente, ¿hay un simple truco de CSS para lograr esto?

html css fonts webfonts Adán
fuente

Respuestas:

276

Sí, puede usar la función CSS denominada @ font-face. Solo se ha aprobado oficialmente en CSS3, pero se ha propuesto e implementado en CSS2 y ha sido compatible con IE durante bastante tiempo.

Lo declaras en el CSS así:

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

Luego, puede hacer referencia a ella como las otras fuentes estándar:

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

Entonces, en este 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>

Y solo necesita colocar JUNEBUG.TFF en la misma ubicación que el archivo html.

Descargué la fuente del sitio web dafont.com :

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

Nicolas Modrzyk
fuente
1
perdón si es "tarea", ¿cómo se vería el código si usara esta fuente JUNEBUG solo para el texto sin formato
Adam el
No sabía que podías hacer eso. ¿Funciona también en otros navegadores?
Julien Bourdon el
1
Funciona en cualquier navegador decente: webfonts.info/wiki/index.php?title=@font-face_browser_support
Nicolas Modrzyk
No me funciona, mi fuente está en la misma carpeta que mi página php.
Negro
1
La ruta @Black especificada en urles relativa a donde está su archivo CSS .
Alex Semeniuk
17

Para obtener la mejor compatibilidad posible con el navegador, su código CSS debería tener este aspecto:

@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 obtener más información, consulte el artículo Uso de @ font-face en CSS-tricks.com .

John Slegers
fuente
17

Puede usar @ font-face en la mayoría de los navegadores modernos.

Aquí hay algunos artículos sobre cómo funciona:

Aquí hay una buena sintaxis para agregar la fuente a su aplicación:

Aquí hay un par de lugares para convertir fuentes para usar con @ font-face:

También cufon funcionará si no desea utilizar font-face, y tiene buena documentación en el sitio web:

nheinrich
fuente
9

Prueba esto

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

vilis.org

SIAMWEBSITE
fuente
4

Si está utilizando una hoja de estilo externa, el código podría verse así:

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

Y debe guardarse en un archivo .css separado (por ejemplo, styles.css). Si su archivo .css está en una ubicación separada del código de la página, el archivo de fuente real debe tener la misma ruta que el archivo .css, NO el archivo de página web .html o .php. Entonces la página web necesita algo como:

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

en la sección <head> de tu página html. En este ejemplo, el archivo de fuente debe ubicarse en la carpeta css junto con la hoja de estilo. Después de esto, simplemente agregue la clase = "junebug" dentro de cualquier etiqueta en su html para usar la fuente Junebug en ese elemento.

Si está poniendo el CSS en la página web real, agregue la etiqueta de estilo en la cabecera del HTML como:

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

Y el estilo del elemento real puede incluirse en lo anterior <style>y llamarse por elemento por clase o id, o simplemente puede declarar el estilo en línea con el elemento. Por elemento quiero decir <div>, <p>, <h1> o cualquier otro elemento dentro del html que necesita usar la fuente Junebug. Con ambas opciones, el archivo de fuente (Junebug.ttf) debe ubicarse en la misma ruta que la página html. De estas dos opciones, la mejor práctica sería:

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

y

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

Y la forma menos aceptable sería:

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

y

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

La razón por la que no es bueno usar estilos en línea es que la mejor práctica dicta que los estilos deben mantenerse en un solo lugar, por lo que la edición es práctica. Esta es también la razón principal por la que recomiendo usar la primera opción de usar hojas de estilo externas. Espero que esto ayude.

Richard Stitz
fuente
-1

Hay una manera simple de hacer esto: en el archivo html agregue:

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

Nota: pones el nombre del archivo .ttf que tienes. luego vaya a su archivo css y agregue:

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

Nota: pones el nombre de la familia de la fuente que tienes.

Nota: no escriba el nombre de la familia de fuentes como su ejemplo de nombre font.ttf: si su nombre de font.ttf es: "vermin_vibes.ttf" su familia de fuentes será: la familia de fuentes "vermin vibes" no contiene caracteres especiales como "-, _" ... etc. solo puede contener espacios.

Abbass Sharara
fuente
Realmente deberías definirlo como un font-faceCSS en lugar de requerir un archivo ttf.
Arcath
no está obligado a hacerlo, así que simplemente puede hacerlo así. Siempre lo hago de dos maneras y en ambas cosas
Abbass Sharara
@Arcath, ¿por qué es mejor usar font-face?
Antonio Araujo