css - otf - Use varias fuentes personalizadas usando @ font-face?

import font css ttf

Question

Estoy seguro de que me estoy perdiendo algo realmente directo. He estado usando una única fuente personalizada con la fuente normal de la fuente:

@font-face {
    font-family: CustomFont;
    src: url(''CustomFont.ttf'');
}

Todo funciona bien cuando lo uso, pero si quiero agregar otra fuente personalizada, ¿qué debo hacer? Intenté separar por comas el siguiente o agregar una cara de fuente completamente distinta, pero no puedo hacer funcionar la segunda fuente.

Answer 1

Echa un vistazo a fontsquirrel . Tienen un generador de fuentes web, que también escupirá una hoja de estilo adecuada para su fuente (busque "@ font-face kit"). Esta hoja de estilo se puede incluir en el suyo, o puede usarla como plantilla.

Answer 2

Puede usar múltiples caras de fuentes con bastante facilidad. A continuación se muestra un ejemplo de cómo lo usé en el pasado:

<!--[if (IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.eot);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.eot);
        }
    </style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.ttf);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.ttf);
        }
    </style>
<!--<![endif]-->

Vale la pena señalar que las fuentes pueden ser divertidas en diferentes navegadores. La fuente de los navegadores anteriores funciona, pero necesita usar archivos eot en lugar de ttf.

Es por eso que incluyo mis fuentes en el encabezado del archivo html ya que puedo usar etiquetas IE condicionales para usar los archivos eot o ttf en consecuencia.

Si necesita convertir ttf a eot para este propósito, hay un sitio web brillante que puede hacer de forma gratuita en línea, que se puede encontrar en http://ttf2eot.sebastiankippe.com/ .

Espero que ayude.

Answer 3

Si tiene un problema con la fuente de trabajo, también he tenido esto en el pasado y el problema que encontré se debió a la familia de fuentes: nombre. Esto tenía que coincidir con el nombre de la fuente que realmente se le dio.

La manera más fácil que encontré para descubrir esto fue instalar la fuente y ver qué nombre para mostrar se da.

Por ejemplo, estaba usando Gill Sans en un proyecto, pero la fuente real se llamaba Gill Sans MT. El espaciado y la capitulación también fueron importantes para hacerlo bien.

Espero que ayude.

Answer 4

Simplemente agrega otra regla @font-face :

@font-face {
    font-family: CustomFont;
    src: url(''CustomFont.ttf'');
}

@font-face {
    font-family: CustomFont2;
    src: url(''CustomFont2.ttf'');
}

Si su segunda fuente aún no funciona, asegúrese de escribir correctamente el nombre de la tipografía y el nombre del archivo, las cachés de su navegador se comportan, su sistema operativo no está jugando con una fuente del mismo nombre, etc.

Answer 5

Yo uso este método en mi archivo css

@font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local(''FontName1''), url(''fontname1.ttf'') format(''truetype''); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local(''FontName2''), url(''fontname2.ttf'') format(''truetype''); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local(''FontName3''), url(''fontname3.ttf'') format(''truetype''); /* others */
}