Hoy en día, es cada vez más frecuente encontrar sitios web que utilizan fuentes no estándar. Esto coincide con el diseño web moderno, donde se prioriza la creatividad sobre la legibilidad. Por supuesto, esta combinación no ocurre a menudo, pero sucede. En los recursos en inglés, las fuentes no estándar son bastante populares. Aquí, por ejemplo, busque en el original, es decir, en el idioma nativo del autor. Y veremos cómo se utilizan fuentes únicas en casi uno de cada tres temas.

Del autor: “Antes de escribir este artículo, hojeé bastante información sobre el tema “Fuentes”. Y recordé muy claramente un punto: mucha gente habla negativamente sobre la conexión de fuentes no estándar. Más precisamente, no lo recomiendan, dicen que está mal, que es una carga pesada y cosas así.

De hecho, en muchos casos se considera que tal declaración impone la propia opinión o incluso transmite la opinión de otra persona. Vale la pena señalar que absolutamente cualquier conexión adicional supone una carga para el sitio; siguiendo este argumento, puede demoler la mitad del sitio de forma segura. Si hay argumentos más convincentes a favor del abandono de las fuentes, entonces sí, por favor... de lo contrario... es necesario experimentar”.

¿Qué significa fuente personalizada?

Se trata de una fuente que no está disponible de forma predeterminada en el software (Windows, Linux, etc.). En consecuencia, si el usuario no dispone de la fuente adecuada en su software, automáticamente utilizará la fuente estándar del sistema. Esto viola la idea original del autor de transmitir el carácter deseado del diseño.

Conectando sus fuentes al sitio

La conexión de fuentes se produce mediante la regla @font-face en la tabla en cascada CSS. Esto incluye: tipo de letra, ruta relativa o directa y verificación de la presencia de fuentes en el software del usuario. Toda esta estructura se ve así:

@font-face ( font-family: namefont;/*typeface*/ src: local("namefont"),/*check*/ url: (font/namefont.ttf);/*ruta*/ )

Explicación: La propiedad font-family especifica la familia de fuentes y src: local verifica que el lector tenga la fuente instalada. Pero la posibilidad de que la fuente se instale ocurre una vez entre un millón. Por lo tanto, la línea "verificar" no es tan obligatoria, pero la última "ruta" de la URL debe estar presente (ya que esta es la ruta a la fuente en sí, que se cargará directamente en el sitio).

Compatibilidad de fuentes entre navegadores

Se debe mencionar la compatibilidad con el navegador, ya que pueden ocurrir inconsistencias. Todos los navegadores populares, las últimas versiones, interactúan perfectamente con la conexión de fuentes en el formato. ttf. Y hablando de versiones posteriores, en particular de IE, así como de dispositivos de Apple, pueden surgir dificultades. Este problema se resuelve mediante servicios especiales que le permiten generar un formato de fuente para cada navegador por separado.

En mi opinión, esto es una necesidad absoluta. Déjame explicarte: IE por debajo de la versión 10 ya requiere acciones adicionales. Pero el porcentaje de su uso es muy pequeño. En cuanto a los dispositivos móviles de Apple, todo se reduce al minimalismo. Definitivamente debería ser más rápido y más fácil de lo normal.

Formato	Explorador	Cromo	Firefox	Safari	Ópera	iOS	Androide
TTF	9.0+	4.0+	3.5+	3.1+	10.0+	incógnita	2.2+
OTF	9.0+	4.0+	3.5+	3.1+	10.0+	incógnita	2.2+
EOT	6.0+	incógnita	incógnita	incógnita	incógnita	incógnita	incógnita
WOFF	9.0+	5.0+	3.6+	5.1+	11.1+	5	incógnita
WOFF2	incógnita	36.0+	35.0+	incógnita	26.0+	incógnita	incógnita
SVG	incógnita	4.0+	incógnita	3.2+	9.0+	3.1+	incógnita

Formatos de fuente

Las fuentes, como muchos otros archivos, tienen diferentes extensiones (formatos). En una breve reseña, veremos cuáles...

TTF (fuentes TrueType)– el formato de fuente más común en los sistemas operativos. Fue desarrollado a finales de los años 80, según una fuente, por Apple, y según otra, junto con Microsoft. Muy a menudo, este formato de fuente se utiliza para conectarse a una página web. Basado en el soporte de todos los navegadores populares para las últimas versiones.

OTF (fuentes OpenType)– modificación de su predecesor (TrueType) con capacidades más avanzadas. Más personajes y menos peso. Fue presentado oficialmente en 1996 por Adobe y desarrollado conjuntamente con Microsoft.

WOFF (formato de fuente abierta web)– creado sobre la base de las dos primeras fuentes con algunos cambios.

WOFF 2.0 (formato de fuente abierta web)– cambios menores en la compresión.

EOT (tipo abierto integrado)– creado por Microsoft en 2007 exclusivamente para los navegadores Internet Explorer.

Fuentes SVG– soporte para iOS Safari.

Servicio de conversión de fuentes

Pero aún así, hay diferentes casos, y si necesitas admitir la fuente en todos los navegadores y dispositivos, tendrás que recurrir a los servicios.

Paso 1.

Paso 2.

A la izquierda del guión, seleccione el alfabeto cirílico.

Paso 3.

Decida la fuente y haga clic en el icono de "uso rápido".

Paso 4.

La página inicial contiene información dividida en pasos:

1. Seleccione un estilo de fuente (normal, negrita, etc.);
2. Seleccione el soporte (latín, cirílico, etc.);
3. Métodos de conexión (más detalles a continuación);
4. Integración de fuentes.

Paso 5.

En el último paso, veremos los métodos de conexión. En realidad es muy simple. Cada uno de los tres métodos es un código independiente que se conecta a su manera según la elección.

1. La conexión estándar a través de una etiqueta generalmente se escribe entre etiquetas (Archivo de WordPress: encabezado.php).

2. Importar a una tabla en cascada mediante la regla @import (archivo de WordPress: style.css).

3. Conexión vía JavaScript en un archivo separado o también entre etiquetas .

Después de conectarse, solo necesitará especificar el tipo de fuente en estilos.

Familia tipográfica: "Comfortaa", cursiva;

¡Eso es todo! Espero que hayas encontrado algo útil en este material para ti. Si tienes alguna duda, por favor hazla en los comentarios, no seas tímido).

¡Hola queridos amigos! En esta publicación me gustaría discutir un punto tan importante en el diseño como conectar fuentes no estándar. Creo que todo diseñador de diseño debe encontrar métodos para "combatir" las fuentes no estándar; de lo contrario, la fantasía del diseñador terminará con las fuentes estándar. Las fuentes no estándar en los diseños PSD siempre han sido un problema para mí: usar imágenes no es conveniente y es de mala calidad; Usar scripts como cufon no es realmente una opción adecuada, algunos puntos indicados en la documentación no me funcionaron y no quiero molestarme con eso en absoluto.

Recientemente, comencé a utilizar la inclusión de fuentes no estándar directamente desde la plantilla, utilizando la regla CSS: @font-face. Este enfoque nos permite cargar la fuente directamente desde la plantilla del sitio si no está instalada en el sistema operativo del usuario.

El código CSS será el siguiente:

@font-face ( font-family: Arbat; /* nombre de fuente para reglas CSS */ src: local("Arbat"), /* comprueba la presencia de la fuente en el sistema operativo del usuario */ url(fonts/Arbat. ttf); / * si el navegador no encuentra la fuente, descárguela en la ruta especificada */ ) [...] h1 ( font-family: Arbat; /* Este nombre de fuente se puede especificar para los elementos necesarios */ )

Todo estaría bien, pero esta maravillosa solución no es para varios navegadores, es decir. No todos los navegadores podrán mostrar esta fuente correctamente. El caso es que no todos los navegadores entienden las fuentes en formato *.ttf.

Aquí hay una lista aproximada de formatos admitidos por los navegadores:

Navegadores compatibles	Formato
Explorador de Internet 6+	EOT
Mozilla Firefox 3.5+ Ópera 10+ Cromo 4+ Safari 3.2+ Ópera móvil 10+ iOS 4.2+ Androide 2.2+	OTF y TTF
Ópera 9+ Cromo 4+ Safari 3.2+ Ópera móvil 10+ iOS androide 3	TTF y SVG
Internet Explorer 9 Firefox 3.6+ Ópera 11+ Google Chrome 6+ Safari 5.1 Ópera Móvil 11+	WOFF

Esta abundancia de formatos se debe al máximo soporte para todos los navegadores. En este caso, el navegador descarga la primera fuente que entiende de la lista (siempre que se especifique el formato correcto). Los formatos se describen en orden de peso creciente. Pero, a pesar de que el formato "GUAU" el más fácil, en primer lugar - "OTE". Esto es necesario para evitar una visualización incorrecta en IE 6-8.

¿Debo especificar el formato?

Declaración "formato" necesario para que el navegador pueda determinar inmediatamente el formato que necesita. Aquellos. Al cargar, simplemente selecciona el formato que necesita y comprende de la lista. ¿Qué sucede si no especifica el formato? Si no especifica un formato, pero hay más de uno conectado, el navegador comenzará a cargarlos todos y a clasificar el deseado en la búsqueda. De ello se deduce que al conectar más de un formato de fuente, especificando la declaración "formato"¡Necesariamente! No olvides que el procesamiento lleva algo de tiempo, pero aquí podemos ganar.

Para habilitar todos los formatos, nuestro código CSS tomará la siguiente forma:

@font-face ( font-family: "Arbat"; src: url("fonts/Arbat.eot"); /* Para compatibilidad con navegador IE6+ */ src: url("fonts/Arbat.eot?#iefix") formato ("embedded-opentype"), /* Hack para mostrar las fuentes correctamente en IE8 */ url("fonts/Arbat.woff") format("woff"), /* Para navegadores modernos */ url("fonts/Arbat. ttf ") formato("truetype"), url("fonts/Arbat.svg#arbat") formato("svg"); peso de fuente: normal; estilo de fuente: normal; ) [...] h1 (fuente - familia: Arbat; /* Este nombre de fuente se puede especificar para los elementos deseados */ )

De ello se deduce que, en este caso, en el directorio " fuentes" Se deben almacenar todos los formatos anteriores de la misma fuente. ¿Y dónde podemos conseguirlos si solo el formato está instalado en nuestro sistema operativo? TTF? Para hacer esto, usaremos un servicio especial de conversión de formato de fuente: http://fontface.codeandmore.com. Todo lo que necesitas hacer es descargar la fuente requerida desde nuestro sistema operativo, hacer clic en el gran botón rojo “¡Quiero mi kit @font-face! "y el servicio nos generará un paquete de fuentes en los formatos requeridos en cuestión de segundos.

¡Atención! Este servicio ahora es pago. El servicio ahora está disponible mediante suscripción, aunque el precio es simbólico: 1 mes. - $3.

Inmediatamente se nos ofrece ver una demostración, así como descargar un archivo con fuentes y un archivo de índice.

Desempaquete este archivo en cualquier directorio de su plantilla, por ejemplo, creando una carpeta: fuentes. Abra un archivo con la extensión .html en cualquier editor de texto (en mi caso es el archivo arbat.html) y copie las reglas de fuente desde allí y péguelas en su archivo de estilo (solo sin el "»).

Aquí está mi código:

@font-face ( familia de fuentes: "Arbat"; src: url("arbat.eot"); src: url("arbat.eot?#iefix") formato("embedded-opentype"), url("arbat .woff") formato("woff"), formato url("arbat.ttf")("truetype"), formato url("arbat.svg#arbat")("svg"); peso de fuente: normal; fuente -estilo: normal)

¡Importante! Cambie las rutas a los archivos de fuentes por las correctas; de lo contrario, ¡nada funcionará!

H1 (font-family: Arbat; ) /* Como ejemplo, tomé el título de primer nivel */

Más servicios Font-Face

Como alternativa, también puedo sugerir servicios gratuitos de generación de fuentes:

No son peores que los ofrecidos. Creo que puedes resolverlos tú mismo, no hay nada complicado allí.

Finalmente, me gustaría señalar todas las ventajas y desventajas de este método.

Ventajas:

• alta velocidad de carga de páginas, con cualquier cantidad de fuentes no estándar utilizadas;
• flexibilidad en el trabajo del maquetador, los textos se pueden cambiar sin ningún problema;
• visualización clara, porque se trata de texto, no de una imagen, ni de un flash, ni de ninguna otra cosa;
• bastante simple de implementar dada la generación de los formatos requeridos.

Defectos:

• Este método no es compatible con todos los navegadores, aunque utilizamos diferentes formatos. No olvides que cada navegador puede tener muchas versiones;
• algunos archivos de fuentes pueden ser bastante pesados ​​y pesar varios megabytes (aunque esto se puede solucionar), y esto puede afectar significativamente la velocidad de carga de la página;
• mientras se carga la fuente, el usuario, aunque sea por un momento, todavía ve la fuente estándar (aquí depende del tamaño de la fuente);
• A veces pueden aparecer errores menores: al pasar el mouse, el color se distorsiona (Safari, Chrome, Opera);
• La fuente puede tener un titular de derechos de autor y, en este caso, será fácil de robar.

En general, depende de usted decidir qué método utilizar para conectar fuentes no estándar. Esta opción me conviene personalmente.

Bueno, eso es todo lo que quería decir sobre la conexión de fuentes no estándar. Estoy esperando tu respuesta en los comentarios. ¡Buena suerte a todos! Nos vemos en los próximos posts...

La primera parte del capítulo está dedicada a la introducción de las fuentes CSS. En esta página aprenderá cómo incluir fuentes en CSS, qué son las fuentes web y cómo trabajar con ellas, qué formatos de fuentes existen y cómo utilizar Google Fonts. Primero, veamos un ejemplo simple de cómo conectar una fuente CSS:

P (familia tipográfica: Verdana; )

Este pequeño fragmento de código significa que para todas las etiquetas

La fuente utilizada es Verdana. La propiedad font-family especifica qué fuente o familia de fuentes se utilizará. La visualización correcta de este estilo en el navegador del usuario depende de si la fuente especificada está instalada en su computadora. En nuestro caso, si la computadora del usuario no tiene la fuente Verdana, el navegador mostrará la fuente predeterminada.

Hubo un tiempo en que los diseñadores tenían que especificar además varias fuentes de respaldo en caso de que la computadora del usuario no tuviera la principal. Digamos que desea formatear el texto en la fuente Verdana e instalar Trebuchet MS, Geneva y cualquier fuente sans-serif como fuentes de respaldo. Está escrito de esta manera:

P (familia tipográfica: Verdana, "Trebuchet MS", Geneva, sans-serif;)

Al procesar este código, el navegador primero verificará la presencia de la fuente Verdana en la computadora del usuario. Si la fuente está presente, el contenido de las etiquetas.

Se mostrará en esta fuente. Si falta la fuente, el navegador comprobará la presencia de la siguiente fuente en la lista: Trebuchet MS. Si también falta esta fuente, se comprobará la presencia de la siguiente fuente: Ginebra. Si la computadora del usuario no tiene Geneva, el navegador seleccionará otra fuente sans serif disponible y mostrará el texto en esa fuente.

Tenga en cuenta: en el código escribimos el nombre de la fuente Trebuchet MS entre comillas. Es necesario poner el nombre de la fuente entre comillas dobles o simples cuando contenga espacios.

Puede leer sobre qué es una fuente serif (serif) y sans-serif (sans-serif) en la página de Wikipedia.

fuentes web

El método anterior de uso de fuentes tiene una gran desventaja: está limitado en la cantidad de fuentes. Tendrá que contentarse únicamente con aquellas opciones que probablemente estén instaladas en la mayoría de las computadoras.

¿Cómo se puede aumentar la elección de fuentes para que el diseño de la página sea individual y agregue originalidad? Las fuentes web vienen al rescate. Lea más el capítulo y aprenderá cómo trabajar con ellos.

Entonces, para mostrar la fuente deseada en el navegador del usuario, necesitamos que esta fuente esté descargada en su computadora. Esto es bastante fácil de hacer. Este método de conectar fuentes a CSS abre posibilidades realmente amplias para los diseñadores. Pero vale la pena mencionar la mosca en el ungüento: en primer lugar, no todos los navegadores admiten un determinado formato de fuente (lo que hará que la fuente no se muestre) y, en segundo lugar, si el archivo de fuente es grande, esto puede ralentizar la carga de la página.

Soporte de formato

¿Cómo solucionar el problema de la falta de coincidencia de formatos de archivo? Echemos un vistazo a la tabla que muestra los formatos de fuente más populares y veamos qué navegadores los admiten:

Nota: Siempre puede encontrar la información más reciente sobre la compatibilidad con formatos de fuentes en el sitio web caniuse.com. Debes ingresar el nombre del formato (por ejemplo, ttf) en la barra de búsqueda.

Si se dirige a navegadores modernos, sólo necesitará utilizar el formato de fuente TTF, el más común y utilizado. En el caso de que necesite tener varios formatos de una fuente, puede utilizar convertidores en línea especiales de un formato a otro y luego conectar todos los archivos uno por uno. De esta forma el navegador puede elegir el formato de fuente con el que trabaja.

Conexión de una fuente web usando @font-face

Supongamos que tiene su propia fuente única llamada MyUniqueFont en formato TTF y desea que el texto principal de la página web se muestre en esta fuente. Lo primero que debe hacer es copiar el archivo de fuente a la carpeta donde se encuentran todos los demás archivos del sitio. Para evitar crear desorden, puede crear una carpeta separada específicamente para las fuentes, llamándola fuentes, por ejemplo.

@font-face (familia de fuentes: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

La propiedad font-family en este caso juega un papel diferente: con su ayuda asignamos un nombre a la fuente, para luego poder usar este nombre al escribir el estilo:

P (familia de fuentes: MyUniqueFont;)

La segunda línea especifica la ruta al archivo de fuente. En nuestro ejemplo, el archivo MyUniqueFont.ttf se encuentra en la carpeta de fuentes. Su URL puede ser diferente.

Fuentes de Google

Google permite conectar fácilmente cualquier fuente de la colección de Google Fonts. Todo lo que necesita hacer para comenzar a usar una fuente que le guste es especificar algunas configuraciones en la página de Google de la fuente, luego copiar el enlace específico a esa fuente y agregarlo a su documento web.

Nota: toda la colección de fuentes de Google está disponible en el sitio web Fuentes de Google. En la página puedes utilizar varios filtros para buscar fuentes por categoría, grosor y alfabeto.

A continuación describiremos cada paso para conectar una fuente de Google. Para entender de qué estamos hablando, seleccione cualquier fuente de la página de Google Fonts y ábrala haciendo clic en el botón Uso rápido.

Paso 1: elige un estilo

En primer lugar, en la página de la fuente seleccionada se mostrarán opciones para su estilo, así como un ícono de velocímetro, que no significa más que la velocidad de carga de la fuente. Cuantos más estilos de fuente seleccione, más tardará en cargarse. Por lo tanto, se recomienda seleccionar sólo aquellas opciones de estilo que planea utilizar.

Paso 2: elige un alfabeto

Más adelante en la página puede seleccionar un conjunto de caracteres: latino, cirílico, etc. Dependiendo de la fuente, es posible que no todas las opciones del alfabeto estén disponibles. Al igual que en el punto anterior, es mejor marcar la casilla solo frente al alfabeto que será necesario.

Paso 3: agregue el código al sitio

El primer método consiste en añadir en el código HTML un enlace al servidor de Google desde donde se descarga la fuente. Debe copiar un fragmento de código ya preparado y colocarlo entre las etiquetas. en su documento HTML. Ejemplo:

...

La segunda forma es conectar la fuente usando la directiva @import. El código terminado se encuentra en la segunda pestaña del punto 3 en la página de la fuente de Google seleccionada. Debe agregarse al principio de su hoja de estilo (de lo contrario, el archivo no se importará). El código se parece a esto:

@importar URL(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

La peculiaridad del primer método es que deberás agregar un enlace a la fuente en el encabezado de cada página donde planeas usarla. Esto es fácil de hacer en sitios con una pequeña cantidad de páginas, pero problemático para recursos grandes. El segundo método es conveniente porque el código se puede colocar al principio de la hoja de estilo externa, y luego todas las páginas a las que está conectada esta tabla recibirán la fuente necesaria, que se cargará mediante la directiva @import.

Paso 4: crea un estilo

Después de completar los pasos anteriores, puedes comenzar a aplicar la fuente. Ya has visto cómo se escribe dicha regla CSS anteriormente:

P (familia de fuentes: "Roboto", sans-serif; )

Si en el primer paso seleccionó varias opciones de fuente (por ejemplo, agregó la opción de fuente en negrita Bold 700), en el tercer paso el código cambiará ligeramente:

@importar URL(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Para luego poner la fuente en negrita, escribe el estilo CSS así:

P (familia de fuentes: "Roboto", sans-serif; peso de fuente: 700;)

Nota: En Google Fonts, sólo se utilizan unidades convencionales de 100 a 900 para indicar el peso de una fuente. Así, un estilo normal (por defecto) equivale a un valor de 400 (normal), y un estilo en negrita estándar equivale a 700. (atrevido).

Las principales ventajas del servicio Google Fonts son:

• facilidad de uso (incluso un principiante puede comprender el servicio y todo el código necesario se genera automáticamente; todo lo que tiene que hacer es copiarlo);
• disponibilidad de fuentes (no es necesario pagar por ellas);
• Se proporcionan todos los formatos de fuente utilizados (esto significa que cada navegador podrá descargar exactamente el formato de fuente con el que trabaja).

Entre las desventajas del servicio se encuentra la no muy amplia variedad de fuentes, especialmente cirílicas. Por cierto, existen otros servicios similares en Internet, por ejemplo, TypeKit (de pago).

Resultados

Hoy tenemos varias opciones disponibles para conectar fuentes originales y no estándar a páginas web. Cada uno de estos métodos tiene sus pros y sus contras. Qué opción es mejor usar, debe determinarla usted mismo. Esto a menudo depende de la situación y pueden resultar útiles diferentes enfoques en diferentes casos. En este punto, sólo necesitas saber cómo usar fuentes en CSS.

Agregar una nueva fuente a un sitio web no es la tarea más sencilla. Dónde elegir, descargar y cómo agregar una fuente a un sitio web en CSS? En este artículo mostraremos uno de lo mas conveniente formas de instalar y conectar la fuente al sitio.

Cómo incluir una fuente en un sitio web en CSS

Por ejemplo, tenemos una fuente Raleway.ttf y queremos usarlo en todos los encabezados ( h1) de nuestro sitio web. Para hacer esto, realice los siguientes pasos:

h1 ( familia de fuentes: "RalewayRegular"; }

Ahora todos los títulos de primer nivel del sitio se muestran en la fuente que necesitamos.

Si desea conectar varias fuentes (o sus estilos), simplemente agréguelas debajo de la anterior:

@fuente { familia de fuentes: "RalewayRegular"; origen: URL("../fonts/RalewayRegular.ttf") formato( "tipo verdadero"); estilo de fuente: normal; peso de fuente: normal; } @fuente{ familia de fuentes: "RalewayBold"; origen: URL("../fonts/RalewayBold.ttf") formato( "tipo verdadero"); estilo de fuente: normal; peso de fuente: normal; }

Es posible que hayas notado que existen diferentes formatos de fuente: .ttf, .woff, .eot, .svg etc. También existe un formato para navegadores modernos. woff2, pero hablaremos de ello en uno de los siguientes artículos. Normalmente, cada fuente se incluye en 3 formatos a la vez. Esto se hace para que la fuente se muestre correctamente en todos los navegadores, incluido. y los viejos. Se parece a esto:

@fuente { familia de fuentes: "RalewayRegular"; origen: dirección URL ( "../fonts/RalewayRegular/RalewayRegular.eot") ; origen: dirección URL ( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") formato ("tipo abierto incrustado"), dirección URL ( "../fonts/RalewayRegular/RalewayRegular.woff") formato( "guau"), dirección URL ( "../fonts/RalewayRegular/RalewayRegular.ttf") formato( "tipo verdadero"); estilo de fuente: normal; peso de fuente: normal; }

Aquí sigue Preste atención al orden de conexión: ¡esto es importante!

No entraremos en detalles, solo recordaremos la apariencia de este diseño.

Si tiene una fuente en un solo formato, utilice diferentes convertidores de fuentes. Aquí está uno de ellos.

Cómo conectar una fuente usando varios servicios

También puedes utilizar el servicio fonts4web para conectar fuentes:

La forma más sencilla de conectar fuentes.

Cómo conectar una fuente a una plantilla Moguta CMS

Cómo agregar un enlace con fuentes de Google a una plantilla CMS de Moguta

Ahora sabes cómo agregar una fuente a un sitio web usando CSS y más. Estaremos encantados de responder a todas tus preguntas.

Vlad Merzhevich

La fuente es una parte integral del diseño web, le da expresividad y reconocimiento al sitio, expresa el estilo característico del sitio y está directamente relacionada con la percepción de los textos. Una fuente bien elegida puede pasar desapercibida, pero sin ella no habrá entusiasmo que le dé integridad al diseño del sitio.

Si ya tiene una fuente específica instalada en su computadora, simplemente agregue una línea a los estilos.

h1 (familia de fuentes: SuperPuperFont;)

El valor de la propiedad font-family es el nombre del tipo de letra, se aplicará a todos los títulos

. Pero, ¿qué verán los visitantes del sitio web si nuestra espectacular y rara fuente no está instalada? Esta situación es muy probable, por lo que si el navegador no reconoce la fuente declarada, utilizará la fuente predeterminada, por ejemplo en Windows es Times New Roman. Todo nuestro diseño tipográfico cuidadosamente pensado se desmoronará y se convertirá en polvo de la noche a la mañana, por lo que debemos buscar la solución más universal. Lo primero que viene a la mente de inmediato es hacer los arreglos para que el archivo de fuente se descargue en la computadora del usuario y el texto se muestre en la fuente seleccionada. En comparación con otros métodos, como mostrar texto a través de una imagen, este método es el más simple y versátil.

¿Qué ventajas nos aporta en última instancia cargar un archivo de fuente y luego aplicarlo mediante CSS?

• El texto es fácil de agregar y editar.
• En el navegador, puede utilizar la búsqueda y encontrar las frases deseadas.
• En la configuración del navegador, puede reducir o aumentar el tamaño de fuente para lograr una visualización cómoda.
• Los motores de búsqueda indexan bien el contenido de los documentos.
• El texto se puede seleccionar y copiar al portapapeles, así como traducirlo a otro idioma.
• Los parámetros del texto, como el interlineado, el color, el tamaño y similares, se pueden cambiar fácilmente utilizando las propiedades CSS.
• Nuevamente, usando CSS, puedes simplemente agregar diferentes efectos al texto, como una sombra.

Como puede ver, hay muchas ventajas. También hay pequeñas desventajas y, para mantener el equilibrio, vale la pena mencionarlas.

• No todas las versiones de navegadores admiten fuentes descargables ni formatos únicos.
• El archivo que contiene el tipo de letra puede ocupar una gran cantidad de espacio, lo que ralentiza la carga de la página web.

en la mesa 1 enumera las versiones del navegador y los formatos de fuente que admiten.

Mesa 1. Formatos soportados

Formato	Explorador de Internet	Cromo	Ópera	Safari	Firefox	Androide	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

El formato más compatible es TTF. A excepción de IE hasta la versión 9.0 e iOS, todos los navegadores lo entienden perfectamente. Entonces, si su fuente tiene este formato y se dirige a navegadores modernos, no tendrá que realizar ninguna acción adicional. Basta con escribir el siguiente código en estilos (ejemplo 1).

Ejemplo 1: conexión TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Primero, cargamos el archivo de fuente usando la regla @font-face. Dentro de él escribimos el nombre del tipo de letra a través del parámetro font-family y la ruta al archivo a través de src. Luego usamos la fuente como de costumbre. Entonces, si necesitamos configurar la fuente del título, entonces para el selector h1, como se muestra en el ejemplo, configuramos la propiedad font-family con el nombre de la fuente cargada. Para versiones anteriores de IE, enumeramos opciones alternativas separadas por comas. En este caso, la fuente del título será "Comic Sans MS", ya que IE8 y versiones inferiores no admiten el formato TTF.

El resultado de este ejemplo se muestra en la Fig. 1.

Arroz. 1. Encabezado con fuente cargada

¿Qué hacer si necesitas desesperadamente una fuente florida en IE8? Afortunadamente, @font-face te permite incluir múltiples archivos de fuentes de diferentes formatos al mismo tiempo. El navegador sólo tiene que elegir el adecuado. Por lo tanto, una solución universal que funciona en todos los navegadores se reduce a convertir el formato TTF existente a EOT y luego conectar ambos archivos.

Para la conversión, existen varios servicios en línea que le permiten cargar un archivo TTF y recibir un archivo EOT como salida. Desafortunadamente, la mayoría de estos servicios tienen el mismo problema: recibimos el archivo, pero el idioma ruso no es compatible. Como resultado, no se logra el resultado deseado, la conversión se realiza incorrectamente. Entre los sitios que revisé, había uno que mostraba el texto correctamente en IE.

Vamos a este sitio, descargamos el archivo TTF y hacemos clic en el botón "Convertir TTF a EOT", luego de lo cual guardamos el archivo resultante en la carpeta con fuentes. Sólo queda un pequeño truco por hacer en los estilos y obligar a diferentes navegadores a cargar la fuente en el formato requerido. Para hacer esto, agregamos dos parámetros src. El primero apunta al archivo EOT y está destinado a versiones anteriores de IE. El segundo parámetro src debe contener dos direcciones separadas por comas, una de las cuales apunta al archivo TTF. El hecho es que las versiones de IE 8.0 y anteriores no comprenden la coma en el parámetro src y, en consecuencia, ignorarán todo el parámetro. Puede haber varias opciones de escritura, por ejemplo, repetir la URL, especificar el nombre de la fuente dentro del parámetro local o incluso escribir una fuente inexistente. Si el navegador no puede cargar dicha fuente, irá a la segunda de la lista y la escribiremos correctamente. Métodos de escritura aceptables.

src: url(fuentes/pompadur.ttf), url(fuentes/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

En el ejemplo 2 se muestra una opción funcional para conectar una fuente para todas las versiones del navegador.

Ejemplo 2: conexión EOT

HTML5 CSS3 IE Cr Op Sa Fx

Un elemento moderno del proceso político.

De hecho, las enseñanzas políticas de Montesquieu ponen de relieve el tipo de cultura política de Europa continental, que se reflejó en las obras de Michels.

En cuanto a iOS, me parece que no tiene mucho sentido crear y descargar una fuente separada en formato SVG. La audiencia de los sitios que lo ven a través de iOS aún es pequeña, además, están tratando de hacer que la versión del sitio para dispositivos móviles sea más liviana y no es recomendable descargar algunas decenas de kilobytes adicionales.

Fuentes web de Google

Puede encontrar un servicio conveniente que se encarga de la rutina de admitir diferentes formatos de fuente y versiones de navegador en www.google.com/webfonts. Aunque hay relativamente pocas fuentes diferentes en la colección (hay varias docenas), todas están seleccionadas de muy alta calidad y se pueden usar de forma gratuita en sitios web.

Antes de seleccionar una fuente, cambie el valor Script a cirílico, luego verá una lista de fuentes que admiten el idioma ruso (Fig. 2).

Arroz. 2. Seleccionar fuentes en Google Web Fonts

Primero debe agregar la fuente que le guste a la colección haciendo clic en el botón "Agregar a la colección" y luego en el botón "Usar" en la esquina inferior derecha de la pantalla. En la página siguiente (Fig. 3) finalmente podrá seleccionar las fuentes que necesita. Al mismo tiempo, debe comprender que un tipo de fuente puede contener varios estilos y cada uno de ellos aumenta el volumen de archivos descargados.

Arroz. 3. Fuentes cargadas en la página.

Puede conectar las fuentes seleccionadas de una de tres maneras; el código agregado se puede copiar debajo de la página.

1. A través de elemento . La línea se verá así.

2. A través de la regla @import. Insertamos esta línea en nuestro archivo CSS en la parte superior.

@importar URL(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. A través de JavaScript.

En principio, todos los caminos son iguales, así que elige según tus preferencias.

Las ventajas de utilizar este servicio son las siguientes.

• Las fuentes son de uso gratuito, no es necesario pagar por ellas.
• Las fuentes ofrecidas están "mejoradas" para verlas en la pantalla, los archivos están optimizados y ocupan un volumen relativamente pequeño.
• El navegador lo detecta automáticamente y se le proporciona la fuente en el formato requerido.

Una de las principales ventajas del servicio es que las fuentes se almacenan en formatos TTF, EOT, WOFF, SVG y se descargan después de consultar el navegador. Por tanto, el formato EOT sólo estará disponible para versiones anteriores de IE.

Depende de usted si utiliza Google Web Fonts o no. Si no encuentra una fuente adecuada allí, siempre puede conectar el popular y extendido TTF. Además, es compatible con las últimas versiones de todos los navegadores populares.