Hay 2 métodos con los que puede incrustar la fuente Ubuntu en su sitio web: usar el Directorio de fuentes de Google (preferido) o usar la @font-facedeclaración CSS y convertir sus fuentes manualmente.
Usando Google Webfonts
Ahora puede usar la fuente Ubuntu como fuente web de Google. Esto hará que el proceso sea mucho más simple. La mayor parte del contenido de esta parte de la respuesta proviene de la respuesta de sladen .
¿Por qué usar el API de fuentes de Google es el método preferido?
El uso de Google Font API es una excelente sugerencia, ya que permite que los webfonts funcionen automáticamente en todos los navegadores modernos sin tener que preocuparse por los detalles. El uso de la API de fuentes significa que los visitantes siempre verán la última versión del tipo de letra automáticamente.
¿Cómo puedo usar la API de fuentes de Google?
Desde el 21 de diciembre de 2010, la familia de fuentes de Ubuntu ahora está incluida y se puede implementar desde la API de fuentes de Google, visite:
Puede leer la publicación de Google Web Font sobre las noticias y luego:
- Abra el directorio de fuentes de Google: página " Ubuntu - Use esta fuente "
Marque la combinación de pesos y estilos de Regular, Italic, Bold y Bold-Italic que necesita para su página web.
Si el valor predeterminado es incorrecto, seleccione la combinación de idioma / script que necesita: un sitio web ruso con ejemplos en inglés podría usar "cirílico, latín".
Agregue la <link>etiqueta entre <head> ... </head>en su página HTML o plantillas y agregue el código CSS apropiado entre las <style> ... </style>etiquetas en su <head>.
Por ejemplo, si estaba creando el sitio web híbrido ruso / inglés y quería usar la fuente como predeterminada para todo el texto, podría agregar el siguiente código entre sus <head>etiquetas:
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
body {
font-family : 'Ubuntu', sans-serif;
}
</style>
Notas :
"Latín" es el guión en el que se escriben el inglés y muchos otros idiomas europeos y africanos.
"Subconjunto" optimiza los archivos de fuente al enviar solo caracteres para ciertos idiomas, las fuentes son de alrededor de 44 kB cada una. La cifra de 168 kB que se muestra en este momento es para los más de 1,200 glifos como una descarga de fuente web única, y la mayoría no son necesarios para un solo sitio web.
Los archivos de fuentes de Ubuntu se convierten automáticamente en el formato correcto para diferentes navegadores; dependiendo de la marca y la versión del formato requerido es WOFF, EOT, SVGo TTF. La combinación correcta de CSS es específica para cada solicitud de página y resuelve mágicamente este difícil problema.
Usando @ font-face
Puede incrustar las fuentes de Ubuntu convirtiéndolas en fuentes WOFF . Luego puede incrustarlos utilizando la declaración CSS @ font-face. Las fuentes (archivos .ttf) se pueden encontrar en /usr/share/fonts/truetype/ubuntu-font-family.
Por ejemplo, para usar la fuente Ubuntu Regular, convertida en un archivo WOFF, Ubuntu-R.woff, use este código CSS:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
De manera similar para Ubuntu Bold:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
Ubuntu Italic:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Ubuntu Bold Italic:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Esto es compatible con todos los navegadores recientes .
Consideraciones
Recuerde que algunos usuarios configuran sus navegadores para usar un conjunto específico de fuentes y pueden molestarse si se usan fuentes personalizadas. Además, lea la Licencia de fuente de Ubuntu para conocer los términos exactos de cómo se puede distribuir la fuente.
El uso de Google Font API es una excelente sugerencia, ya que permite que los webfonts funcionen automáticamente en todos los navegadores modernos sin tener que preocuparse por los detalles. El uso de la API de fuentes significa que los visitantes siempre verán la última versión del tipo de letra automáticamente.
Desde el 21 de diciembre de 2010, la familia de fuentes de Ubuntu ahora está incluida y se puede implementar desde la API de fuentes de Google, visite:
Puede leer la publicación de Google Web Font sobre las noticias y luego:
<head> ... </head>y<style>...</style>de su página HTML o plantillas.Notas:
"Latín" es el guión en el que se escriben el inglés y muchos otros idiomas europeos y africanos.
"Subconjunto" optimiza los archivos de fuente al enviar solo caracteres para ciertos idiomas, las fuentes son de alrededor de 44 kB cada una. La cifra de 168 kB que se muestra en este momento es para los más de 1,200 glifos como una descarga de fuente web única, y la mayoría no son necesarios para un solo sitio web.
Los archivos de fuentes de Ubuntu se convierten automáticamente en el formato correcto para diferentes navegadores; dependiendo de la marca y la versión del formato requerido es
WOFF,EOT,SVGoTTF. La combinación correcta de CSS es específica para cada solicitud de página y resuelve mágicamente este difícil problema.fuente
La representación de fuentes del lado del servidor (quizás una mejor "representación dinámica de fuentes") ha sido un tema interesante durante mucho tiempo.
Técnicamente, parece lógico que para que una máquina muestre una fuente específica, ya debería estar instalada localmente.
Por otro lado, el diseño web pierde mucho al tener que apegarse a las 'fuentes web' básicas / conocidas.
CSS2.1 ha realizado algunas mejoras mediante el uso de la declaración de regla @ font-face .
Todavía no se ha convertido en un estándar, pero eventualmente lo hará con CSS3.
Además de eso, ha habido algunos métodos alternativos, como:
Espero que los enlaces proporcionados le den una mejor idea de lo que se puede hacer ;-)
fuente