Respuestas:
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 :
urles relativa a donde está su archivo CSS .
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 .
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:
Prueba esto
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
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.
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.
font-faceCSS en lugar de requerir un archivo ttf.