A pesar de que un desarrollador web HTML5 puede sugerir cualquier fuente de una página web, los ficheros son tradicionalmente un activo a nivel de cliente. Si el cliente no tiene instalada la fuente, que no lo verá. Afortunadamente, CSS3 soporta una solución sensata para proporcionar fuentes de carga.

El estilo no funciona como la mayoría de elementos CSS. No se aplica marcado a alguna parte de la página. En su lugar, se define un nuevo valor CSS que se puede utilizar en otras marcas. En concreto, se le permite colocar un archivo de fuente en su servidor y definir una familia de fuentes utilizando esa fuente.

 @ Font-face {font-family: "Miama"-src: url ("Miama.otf") -}

los Familia tipográfica atributo indica el nombre le va a dar este tipo de letra en el resto de su código CSS. Por lo general es similar al nombre del archivo fuente. los Familia tipográfica atributo es la dirección URL del archivo fuente real, ya que se encuentra en el servidor. Después de un font-face ha sido definida, que puede ser utilizado en un atributo común en el resto de su código CSS:

Video: Como utilizar Icomoon para usar iconos vectoriales con CSS

 h1 {font-family: Miama-}

Aquí está el código para el ejemplo de fuente personalizada:

Embedded Demo Fuentes
Aquí hay otra fuente personalizada

A pesar de todos los navegadores modernos soportan la @Perfil delantero característica, los tipos de archivo soportados reales varían de un navegador a otro. Estos son los tipos de fuentes primarias:

• TTF: está bien soportado el formato TrueType estándar, pero no por todos los navegadores. Muchas fuentes de código abierto están disponibles en este formato.

• OTF: Esto es similar a TTF, pero es un auténtico estándar abierto, por lo que es preferido por aquellos que están interesados ​​en estándares abiertos. Es apoyado por la mayoría de los navegadores excepto IE.

• WOFF: WOFF es un formato estándar propuesto actualmente soportado por Firefox. Microsoft ha dado a entender a apoyar este formato en el IE.

  Video: HTML5 & CSS3 - 9.Fuentes Personalizables

• EOT: Este es el formato de fuente incrustada propietario de Microsoft. Sólo funciona en IE, pero para ser justos, Microsoft ha incorporado soporte para fuentes había durante muchos años.

Se puede utilizar una herramienta de conversión de fuentes como onlinefontconverter.com/ para convertir a cualquier formato de fuente que prefiere.

Es posible suministrar múltiples src atributos. De esta manera, se puede incluir tanto una versión OTF de una fuente EOT y así que va a trabajar en una amplia variedad de navegadores.

Cuando se utiliza esta técnica, es necesario tener una copia del archivo de fuentes a nivel local. Debe estar en el mismo directorio que su página web. Cuando comience su alojamiento en un servidor web, tendrá que mover su archivo de fuente al servidor junto con todos los otros recursos a sus necesidades página web. El hecho de que se puede incluir una fuente no significa que usted debe. Piense con cuidado acerca de la legibilidad.

También, ser respetuoso de la propiedad intelectual. Afortunadamente, hay muchas fuentes de código abierto gratuitos excelentes disponibles. Comenzar mirando Abrir biblioteca de fuentes. Fuentes de google es otro gran recurso para fuentes libres. Con la herramienta de Google Font, se puede seleccionar una fuente incrustada en los servidores de Google, y puede copiar el código que hace que la fuente disponible sin necesidad de descargar.