Usando fuentes personalizadas usando CSS?

He visto algunos nuevos sitios web que están utilizando fuentes personalizadas en sus sitios (que no sean el Arial regular, Tahoma, etc.).

Y soportan una buena cantidad de navegadores.

¿Cómo se hace eso? Al mismo tiempo que impide que las personas tengan acceso gratuito para descargar la fuente, si es posible.

 140
cssfont-face
Author: Boann, 2012-08-27
Source

7 answers

Genéricamente, puede usar una fuente personalizada usando @font-face en su CSS. He aquí un ejemplo muy básico: 

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Luego, trivialmente, para usar la fuente en un elemento específico: 

.classname {
    font-family: 'YourFontName';
}

(.classname es su selector).

Tenga en cuenta que ciertos formatos de fuente no funcionan en todos los navegadores; puede usar fontsquirrel.com ' s generador para evitar demasiado esfuerzo de conversión.

Puede encontrar un buen conjunto de fuentes web gratuitas proporcionadas por Google Fonts (también tiene CSS generado automáticamente @font-face reglas, para que no tengas que escribir las tuyas).

Mientras que también impide a las personas tener acceso libre para descargar la fuente, si es posible

No, no es posible darle estilo a tu texto con una fuente personalizada incrustada a través de CSS, mientras se evita que la gente lo descargue. Necesitas usar imágenes, Flash o el HTML5 Canvas , todos los cuales no son muy prácticos.

¡Espero que eso haya ayudado!

 300
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-14 11:43:38

Para asegurarse de que su fuente es compatible con navegadores, asegúrese de usar esta sintaxis: 

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Tomado de aquí.

 24
Author: Serj Sagan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-18 02:44:06

Tienes que descargar el archivo de fuente y cargarlo en tu CSS.

F. e. Estoy usando la fuente Yanone Kaffeesatz en mi aplicación Web.

Lo cargo y lo uso a través de 

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

En mi hoja de estilo.

 22
Author: akluth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-27 14:33:02

Si no encuentras ninguna fuente de la que te guste Google.com/webfonts o fontsquirrel.com siempre puede crear su propia fuente web con una fuente que haya creado.

Aquí hay un buen tutorial: Haga su propio kit de fuentes web font face

Aunque no estoy seguro de evitar que alguien descargue su fuente.

Espero que esto ayude,

 4
Author: Eric Robinson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-27 14:34:04

También hay una herramienta interesante llamada CUFON. Hay una demostración de cómo usarlo en este blog Es muy simple e interesante. Además, no permite a las personas ctrl + c / ctrl + v el contenido generado.

 4
Author: Periback,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-27 15:51:41

Estoy trabajando en Win 8, utilice este código. Funciona para IE y FF, Opera, etc. Lo que entendí son: fuente woff es luz et común en Google fonts.

Vaya aquí para convertir su fuente ttf a woff antes.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
 1
Author: Arnold,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-20 08:59:03

Hoy en día hay cuatro formatos contenedores de fuentes en uso en la web: EOT, TTF, WOFF,y WOFF2.

Desafortunadamente, a pesar de la amplia gama de opciones, no hay un solo formato universal que funcione en todos los navegadores antiguos y nuevos:

  • EOT es IE solamente,
  • TTF tiene soporte parcial de IE,
  • WOFF goza de la mayor compatibilidad, pero no está disponible en algunos navegadores antiguos
  • WOFF El soporte 2.0 es un trabajo en progreso para muchos navegador.

Si desea que su aplicación web tenga la misma fuente en todos los navegadores, es posible que desee proporcionar todos los 4 tipos de fuente en CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
 1
Author: Hitesh Sahu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-12 10:03:51