¿Cómo agregar alguna fuente no estándar a un sitio web?

519

¿Hay alguna manera de agregar alguna fuente personalizada en un sitio web sin usar imágenes, Flash u otros gráficos?

Por ejemplo, estaba trabajando en el sitio web de una boda, y encontré muchas fuentes agradables para ese tema. Pero no puedo encontrar la forma correcta de agregar esa fuente en el servidor. ¿Y cómo incluyo esa fuente con CSS en el HTML? ¿Es esto posible sin gráficos?

html css fonts font-face vaske
fuente
18
Desde que se hizo esta pregunta, se @font-faceha vuelto mucho más ampliamente compatible y se recomienda para uso general. Solo debe tener en cuenta que IE requiere fuentes en un formato diferente al de otros navegadores. Ver stackoverflow.com/questions/2219916/is-font-face-usable-now
David Johnstone
10
¡Asegúrese de tener derecho a distribuir la fuente!
Vie
2
Visite typekit.com , o para el fontsquirrel.com
bjudson
1
relacionados stackoverflow.com/questions/8050640/…
Adrien Be
3
www.fontsquirrel.com parece genial para generar los archivos de fuente necesarios y crear una buena sintaxis @fontface a prueba de balas (igual que la fuente recomendada fontspring.com/blog/fixing-ie9-font-face-problems )
Adrien Be

Respuestas:

500

Esto podría hacerse a través de CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Es compatible con todos los navegadores habituales si utiliza TrueType-Fonts (TTF) o Web Open Font Format (WOFF).

hangy
fuente
13
Tanto Internet Explorer como Firefox NO están basados ​​en Webkit, por lo que es una solución bastante inútil en mi opinión.
Casper
58
No es inútil ya que es estándar: cuanto más lo implemente, más probablemente será implementado por los navegadores. Eso no significa que no debas encontrar otra forma de compensar, pero usar esto como un complemento me parece bueno.
e-satis
8
Sin embargo, Firefox 3.1 es compatible con @ font-face.
Ms2ger
2
@brendanjerwin: versión actualizada de su enlace - brendanjerwin.com/development/web/2009/03/03/…
Matt Ball
6060
Hola chicos, ¿adivinen qué? ¡Ya casi es 2016! ¡Ahora es ampliamente compatible! ¡Hurra! Me alegro, encontré esta respuesta tan tarde. Jaja.
jessica
121

Puede agregar algunas fuentes a través de Google Web Fonts .

Técnicamente, las fuentes están alojadas en Google y usted las vincula en el encabezado HTML. Luego, puede usarlos libremente en CSS con @font-face( lea sobre esto ).

Por ejemplo:

En la <head>seccion:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Luego en CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

La solución parece bastante confiable (incluso Smashing Magazine la usa para el título de un artículo ). Sin embargo, hasta ahora no hay muchas fuentes disponibles en el Directorio de fuentes de Google .

Michał Pękała
fuente
1
En julio de 2014, google expandió las fuentes e incluyó las fuentes de Google Noto que admiten la mayoría de los idiomas google.com/get/noto/# . Abobe ha respaldado esta iniciativa de fuente abierta que admite todos los idiomas blog.typekit.com/2014/07/15/introducing-source-han-sans
vsingh
parece que (las fuentes web de Google) no son compatibles con las versiones .eot y .woff y .svg de las fuentes. ¡solo admite la versión .ttf de las fuentes!
Mahdi Jazini
77

El camino a seguir es usar la declaración CSS @ font-face que permite a los autores especificar fuentes en línea para mostrar texto en sus páginas web. Al permitir que los autores proporcionen sus propias fuentes, @ font-face elimina la necesidad de depender del número limitado de fuentes que los usuarios han instalado en sus computadoras.

Echa un vistazo a la siguiente tabla:

ingrese la descripción de la imagen aquí

Como puede ver, hay varios formatos que debe conocer principalmente debido a la compatibilidad entre navegadores. El escenario en los dispositivos móviles no es muy diferente.

Soluciones:

1 - Compatibilidad total del navegador

Este es el método con el apoyo más profundo posible en este momento:

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

2 - La mayoría del navegador

Sin embargo, las cosas están cambiando mucho hacia WOFF , por lo que probablemente pueda salirse con la suya:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Solo los últimos navegadores

O incluso solo WOFF.
Luego lo usas así:

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

Referencias y lecturas adicionales:

Eso es principalmente lo que necesita saber sobre la implementación de esta función. Si desea investigar más sobre el tema, lo alentaré a que consulte los siguientes recursos. La mayor parte de lo que pongo aquí se extrae de lo siguiente

Javier Cadiz
fuente
2
La herramienta extremadamente útil Font Squirrel puede generar el CSS necesario para el soporte completo del navegador. Incluso le permite cargar la fuente como cualquiera de estos formatos, la convierte a todos los demás formatos y le permite descargarlos todos. Es un salvavidas cuando se trata de fuentes personalizadas.
Jacob Stamm
¿Qué significa svgFontName? ¿Debo cambiarlo por el nombre de mi familia de fuentes o dejarlo como está?
Gherman el
17

Si por fuente no estándar, quiere decir una fuente personalizada de un formato estándar, así es como lo hago, y funciona para todos los navegadores que he verificado hasta ahora:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

así que solo necesitará las fuentes ttf y eot. Algunas herramientas disponibles en línea pueden hacer la conversión.

Pero si desea adjuntar una fuente en un formato no estándar (mapas de bits, etc.), no puedo ayudarlo.

BiAiB
fuente
1
Ejemplo de herramienta en línea: kirsle.net/wizards/ttf2eot.cgi Ejemplo de herramienta sin conexión: code.google.com/p/ttf2eot/wiki/Demo : también debería ser posible utilizar fuentes WOFF .
Wilf
11

Descubrí que la forma más fácil de tener fuentes no estándar en un sitio web es usar sIFR

Implica el uso de un objeto Flash que contiene la fuente, pero se degrada muy bien a texto / fuente estándar si Flash no está instalado.

El estilo se establece en su CSS y JavaScript configura el reemplazo de Flash para su texto.

Editar: (todavía recomiendo usar imágenes para fuentes no estándar ya que sIFR agrega tiempo a un proyecto y puede requerir mantenimiento).

Mate
fuente
24
¡Qué idea tan terrible! Tengo flash en mi navegador pero también flashblock. En ese sitio web, mi navegador muestra una horrible página desfigurada. Flash debería ser algo que uses para grandes animaciones o películas. Demasiado flash es muy molesto y visualmente, mi mi ...
e-satis
2
@ e-satis: ¿Cómo es eso? Personalmente, nunca noto la diferencia entre una página que usa sIFR y una que no, aparte de las sutiles diferencias de representación de texto. Creo que es una gran idea, sinceramente, aunque @font-facees mucho mejor donde se admite.
Sasha Chedygov
"Editar: (todavía recomiendo usar imágenes para fuentes no estándar ya que sIFR agrega tiempo a un proyecto y puede requerir mantenimiento)". muy bien dicho. sIFR es una técnica realmente genial, pero parece requerir mucho para obtener el aspecto EXACTO que desea. Si tienes tiempo para aprender y dominar esta técnica, te la recomiendo. Pero si está buscando una técnica de reemplazo de fuentes rápida y fácil, usaría el reemplazo de imágenes o incluso la propiedad @ font-face css
Derek Adair el
10

Typeface.js y Cufon son otras dos opciones interesantes. Son componentes de JavaScript que representan datos de fuentes especiales en formato JSON (que puede convertir de formatos TrueType u OpenType en sus sitios web) a través del nuevo elemento <canvas> en todos los navegadores más nuevos, excepto Internet Explorer y VML en Internet Explorer.

El principal problema con ambos (a partir de ahora) es que seleccionar texto no funciona o al menos solo funciona de manera bastante incómoda.

Aún así, es muy agradable para los titulares. Texto del cuerpo ... No lo sé.

Y es sorprendentemente rápido.

Thomas
fuente
Otra opción interesante es typekit.com. Concepto similar.
Zack
8

O podrías probar sIFR . Sé que usa Flash, pero solo si está disponible. Si Flash no está disponible, muestra el texto original en su fuente original (CSS).

Casper
fuente
4

La técnica que el W3C ha recomendado para hacer esto se llama "incrustación" y está bien descrita en los tres artículos aquí: Fuentes incrustadas . En mis experimentos limitados, he encontrado este proceso propenso a errores y he tenido un éxito limitado al hacer que funcione en un entorno de múltiples navegadores.

Steve Moyer
fuente
4

Safari e Internet Explorer admiten la regla CSS @ font-face, sin embargo, admiten dos tipos de fuentes incrustadas diferentes. Firefox planea admitir el mismo tipo que Apple pronto. SVG puede incrustar fuentes, pero todavía no es tan compatible (sin un complemento).

Creo que la solución más portátil que he visto es usar una función de JavaScript para reemplazar los encabezados, etc. con una imagen generada y almacenada en caché en el servidor con la fuente de su elección, de esa manera simplemente actualiza el texto y no tiene que cosas alrededor en Photoshop.

zobier
fuente
Esto no tiene que hacerse con JavaScript. Sé que a muchas personas les gusta usar JavaScript para algunas cosas hoy en día, pero una técnica CSS estándar puede ser más apropiada aquí. Ver sitepoint.com/article/header-images-css-xhtml
hangy
Lo siento si hay confusión, la técnica no se refiere al método de reemplazo de imágenes que, como usted dice, puede ser CSS. Se trata de generar gráficos que representen una cadena dada en una fuente / estilo particular, sobre la marcha, en el servidor, lo que evita la necesidad de crearlos manualmente.
zobier
4

Si usa ASP.NET, es realmente fácil generar fuentes basadas en imágenes sin tener que instalar fuentes (como agregar a la base de fuentes instalada) en el servidor mediante el uso de:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

y luego dibujando con esa fuente en un Graphics.

mate
fuente
1
bueno, sí ... Y tu usuario puede olvidarte de copiar y pegar. Y haciendo zoom también, en navegadores antiguos. ¡Ni siquiera hablo de problemas de ancho de banda!
e-satis
2
Sí, está bien, ¿y la pregunta especificaba que lo iba a usar para texto de contenido? No, no, era una pregunta general, y esta era una respuesta general. Pequeños fragmentos de texto, encabezados, etc., no ocupan mucho ancho de banda. Sheesh, ¡controla!
Mattlant
3

Parece que solo funciona en Internet Explorer, pero una búsqueda rápida en Google de "fuentes de inserción html" produce http://www.spoono.com/html/tutorials/tutorial.php?id=19

Si desea permanecer independiente de la plataforma (¡y debería hacerlo!) Tendrá que usar imágenes, o simplemente usar una fuente estándar.

James Muscat
fuente
3

Investigué un poco y desenterré el reemplazo dinámico de texto (publicado el 15/06/2004).

Esta técnica utiliza imágenes, pero parece ser "manos libres". Escribes tu texto y dejas que algunos scripts automáticos busquen y reemplacen automáticamente en la página por ti sobre la marcha.

Tiene algunas limitaciones, pero es probablemente una de las opciones más fáciles (y más compatibles con el navegador) que el resto que he visto.

Kent Fredric
fuente
3

También es posible usar fuentes WOFF - ejemplo aquí

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
Wilf
fuente
3

Simplemente proporcione el enlace a la fuente real como esta y estará listo para comenzar

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
Abhijeet Kumar
fuente
Una buena alternativa simple. Y está seguro de tener los derechos para usarlo. Vea developers.google.com/fonts/docs/getting_started
Tim Erickson,
2

Typeface.js JavaScript Way:

Con typeface.js puede incrustar fuentes personalizadas en sus páginas web para que no tenga que procesar texto en imágenes

En lugar de crear imágenes o usar flash solo para mostrar el texto gráfico de su sitio en la fuente que desea, puede usar typeface.js y escribir en HTML y CSS, como si sus visitantes tuvieran la fuente instalada localmente.

http://typeface.neocracy.org/

bakkal
fuente
2

Si tiene un archivo de su fuente, deberá agregar más formatos de esa fuente para otros navegadores.

Para este propósito utilizo un generador de fuentes como Fontsquirrel, que proporciona todos los formatos de fuente y su @ font-face CSS, solo tendrá que arrastrarlo y soltarlo en su archivo CSS.

saadeez
fuente