Aunque 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, ella no lo verá. Afortunadamente, CSS3 soporta una solución razonable para proporcionar fuentes descargables.

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

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

los Familia tipográfica atributo indica el nombre que va a dar este tipo de letra en el resto de su código CSS. Típicamente 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 se ha definido, que puede ser utilizado en un atributo común en el resto de su código CSS:

 h1 {font-family: Miama-}

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

Demo Fuentes Embedded
Aquí hay otra fuente personalizada

Aunque todos los navegadores modernos soportan la @Perfil delantero función, los tipos de archivo reales soportados varían de un navegador a otro. Estos son los tipos de fuentes primarias:

• TTF: El formato TrueType estándar está bien soportado, 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 estándar verdaderamente 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.

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

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

Es posible suministrar múltiples src atributos. De esta manera, puede incluir tanto un EOT y la versión OTF de un tipo de letra lo que va a trabajar en una amplia variedad de navegadores.

Cuando se utiliza esta técnica, es necesario tener una copia del archivo de fuente local. Debe estar en el mismo directorio que su página web. Cuando comience 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 usted 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. Comience por mirar Open Font Library. Google Fuentes es otro gran recurso para fuentes libres. Con la herramienta de Google Font, puede seleccionar una fuente incrustada en los servidores de Google, y se puede copiar el código que hace que la fuente disponible sin necesidad de descargar.