Fuentes no estándar en Blogger para el diseño de blogs. Hermosa fuente caligráfica en Blogspot, Blogger

Buenos días, queridos lectores. Hoy quiero hablar sobre una de las formas de instalar una fuente cirílica no estándar en su sitio. Este método adecuado para cualquier sitio, incluidos los blogs de Blogger. Este método se ha utilizado con éxito en muchos sitios en inglés y se usa activamente en temas premium de WordPress y Joomla.

Porque Dado que la mayoría de mis lectores escriben blogs en Blogger y WordPress, les mostraré cómo instalar una fuente personalizada en esos blogs. Al mismo tiempo, el método descrito para Blogger es adecuado para absolutamente cualquier sitio. Y para WordPress hay un complemento listo para usar. Pero no le aconsejo que desplace el artículo a las descripciones relevantes, porque. para configurar el complemento, necesitará todos los conocimientos sobre este método.

pienso en este momento esta es una de las formas más populares de instalar una fuente cirílica no estándar en el sitio, en primer lugar, debido a la facilidad de instalación y, en segundo lugar, debido a la compatibilidad con diferentes navegadores.

¿Te he intrigado lo suficiente? Es hora de pasar a los detalles.

Entonces, este método se llama Cufon. Fue inventado por un desarrollador: Simo Kinnunen. Primero, creó un archivo especial que debe conectarse al sitio. En segundo lugar, creó un generador que convierte cualquier fuente en JavaScript.

El método en sí es fácil de deshonrar, y luego lo verás. Lo más difícil aquí es exactamente la búsqueda de la fuente requerida. Y seguro que muchos de vosotros que no sois usuarios activos editores gráficos, como PhotoShop, simplemente no tienen idea de qué fuente cargar en el generador y dónde obtener dicha fuente. Esto es de lo que decidí hablar con más detalle.

No es ningún secreto que un determinado conjunto de fuentes está instalado en cualquier computadora, en el mismo Word y otros programas. También podemos instalar fuentes nuevas de forma independiente en nuestra computadora, incluso en cualquier programa. Para ello, solo necesitamos teclear la frase en cualquiera de los buscadores descargar fuentes cirílicas y asegúrese de que las fuentes que encontramos estén en formato .ttf.

Después de descargar la fuente que te gusta en formato .ttf, puedes instalarla en tu computadora simplemente abriéndola.

O seleccione el comando Instalar usando el botón derecho del mouse. Después de este procedimiento, la fuente se mostrará en todos los programas instalados en la computadora, donde generalmente se proporciona. Aquellos. no se requiere ninguna acción adicional. Se garantiza que el método descrito funcionará en Windows 7.

Instalar absolutamente cualquier fuente cirílica en el sitio en tres pasos

Por lo tanto, nos hemos convertido en propietarios de una hermosa fuente cirílica no estándar y queremos instalarla en nuestro sitio. ¿Cuáles son nuestras acciones?

Paso 1

Vamos al sitio web de Cufon - cufon.shoqolate.com.
Haga clic en el enlace en el menú - Descargar. Se abre la página del guión. Simplemente copiamos todo el código, lo pegamos en el bloc de notas y lo guardamos con la extensión .js. Para mis lectores, he preparado un archivo listo para usar, puede descargarlo a su computadora.

Ojo, a la fecha de redacción del post el 26 de julio de 2011, la versión del script es 1.09i. Es esta versión ahora en el enlace de arriba.

Subiendo el script al hosting. Cualquiera que bloguee en Blogger ya debería saber dónde cargar un archivo de terceros (), uso los sitios de Google para esto.

Paso 2

Regresamos al sitio web de Cufon a la pestaña Generador. Ante nosotros hay una página con muchas configuraciones. Para ser honesto, no entré en absolutamente todas las configuraciones, pero durante los experimentos probé diferentes y siempre obtuve el resultado deseado.

Pero en cualquier caso, he preparado algunas capturas de pantalla con ajustes básicos para llamar tu atención sobre puntos importantes.


Como puede ver, hay una ventana de carga separada para cada tipo de fuente:

  • fuente normal
  • negrita
  • cursiva normal
  • negrita cursiva

No entendí completamente por qué era así, pero lo cargué exactamente donde la descripción caracterizaba al máximo mi fuente.

Por ejemplo, la captura de pantalla muestra la carga de una fuente manuscrita. Está inclinado y bastante bien alimentado :).


A continuación, se resalta el campo con el acuerdo de licencia. Debe marcar la casilla y así confirmar que la fuente que está cargando puede ser utilizada en la web por el desarrollador de esta misma fuente. Aquí la cuestión es delicada, por desgracia, entre la gran variedad de tipografías diferentes que hay en Internet, nosotros mismos no sabemos exactamente qué tipografía podemos utilizar y cuáles no. Por lo tanto, este artículo está enteramente en su conciencia.

Siguiente captura de pantalla.

  1. En el primer campo indicamos que queremos mostrar letras mayúsculas y minúsculas, así como números y puntuación.
  2. El segundo campo está marcado de forma predeterminada, no he intentado eliminarlo.
  3. En el tercer campo, asegúrese de seleccionar los alfabetos cirílico y ruso.

Resalté una línea en azul: aquellos que generan la fuente para WordPress marcan aquí.
Y los últimos ajustes.

  1. No escribí nada en el primer cuadro, pero creo que el campo es útil desde el punto de vista de que si especifica los dominios en los que se utilizará la fuente, simplemente no funcionará en otros dominios.
  2. Entiendo que en el campo superior estamos hablando sobre qué tamaño de fuente irá por defecto. Puede aceptar la configuración o puede rechazarla marcando la casilla. Personalmente, probé de diferentes maneras y quedé satisfecho con ambas opciones. Creo que también depende tanto de la fuente en sí como de la idea del diseñador de la plantilla. El siguiente ítem en la ventana 2, el propio generador recomienda apagarlo, siempre que se vaya a utilizar un tamaño de letra pequeño. Si es posible, es mejor poner la última marca de verificación, porque. gracias a esta configuración, el archivo generado es más pequeño, lo que sin duda afectará la carga de la fuente para mejor.
  3. Y por último, un acuerdo con las condiciones de uso del generador.

Como resultado, obtenemos otro archivo, que también se carga en el alojamiento.

Paso 3

Lo único que queda es especificar en los archivos de plantilla del sitio antes de la etiqueta de cierre código como este:

Como puede ver en el código, estamos aplicando la fuente a la etiqueta de encabezado h1. Por lo tanto, puede especificar cualquier otra etiqueta para que muestre nuestra fuente cirílica.

También puede especificar no una etiqueta, sino un identificador:

Pero eso no es todo. Si desea usar varias fuentes diferentes en un sitio a la vez, entonces para todas las fuentes nuevas vamos al paso dos y las especificamos todas:

Si no está seguro de la ortografía correcta de su fuente, abra el archivo generado correspondiente del paso 2 y encuentre la información que necesita.

El resaltado en azul es el nombre de la fuente.
Entonces, en uno de mis blogs de prueba, originalmente era así.


Y quedó así:

Cómo instalar una fuente cirílica personalizada en WordPress

Para los usuarios de WordPress, todavía es mucho más fácil. Por supuesto, puede seguir todo el camino descrito y la fuente también funcionará, pero también hay un complemento listo para usar llamado All-in-One Cufon. Puede descargar el complemento tanto desde el sitio web del desarrollador como directamente en el panel de administración del blog.


Instalando el complemento. Activar. Vaya a la configuración del complemento. En la parte superior hay dos mensajes de advertencia.


La primera es que debe crear una carpeta cufon-fonts en el directorio wp-content/plugins/. Para hacer esto, conéctese a través de FTP o vaya al panel de control del alojamiento y cree una nueva carpeta en la carpeta de complementos llamada cufon-fonts. Después de eso, el primer mensaje desaparece.

El segundo mensaje dice que debe colocar el archivo de fuente generado en la carpeta creada, el mismo archivo que obtenemos en el Paso 2. Cargamos el archivo y el mensaje desaparece, mientras que la fuente aparece en la configuración a continuación, que ahora el complemento " ve".


No olvide marcar la casilla junto a la fuente que va a utilizar en la plantilla. Pero la fuente aún no funciona. A continuación se muestra el campo Código Cufon, en el que debemos especificar a qué etiqueta se debe aplicar nuestra fuente cirílica. En este caso, debe especificar un código simple, sin ninguna otra designación.

reemplazar("h1");


Por cierto, vale la pena decir que si ha instalado tema de WordPress con una fuente que ya no es estándar, aunque no tiene una ortografía cirílica, entonces necesita:

  1. Instale el complemento Cufon todo en uno.
  2. Instale la fuente generada.

No necesita ingresar el Código Cufon en el campo a continuación, como regla general, este código ya está escrito en la plantilla. Si desea instalar otra fuente, además de la existente, deberá realizar dicha entrada, como escribí en los ejemplos anteriores.

Una nota muy importante.
Si ha optimizado los encabezados en la plantilla de acuerdo con mis artículos, debe tener mucho cuidado. Si recuerdas, en todas las páginas excepto en la principal, el título del blog está en la etiqueta (en enlace). Debe asignar una identificación o clase a esta etiqueta, por ejemplo:

Y luego su código Cufon debería ser así:

reemplazar("h1");
cufon.replace(".mycufon1");

En consecuencia, para los títulos de los artículos, debe hacer lo mismo.

Lo felicito, se ha convertido en el propietario de una fuente cirílica no estándar, e incluso podría decirse única.

Lo único en lo que no me detuve fue en la descripción de los estilos CSS. Por un lado, se conservaron los estilos que ya tenía en las fuentes por defecto, luego de reemplazarlas por fuentes Cufon. Aquellos. color, el tamaño no ha cambiado. Por otro lado, la mayoría de los estilos repiten estilos CSS ya estándar, es decir, puedes arreglártelas con lo que ya tienes. Si desea experimentar, puede ver todas las configuraciones de CSS en la documentación de esta página.
Eso es todo. Deseo que tengas los blogs más bonitos de Runet.

¿Cómo cambiar la fuente en su sitio? ¿Cómo conectar fuentes públicas de la biblioteca de fuentes de Google y qué sucede si la fuente es exclusiva? Si las preguntas son relevantes para usted, siga leyendo.

formatos de fuente

Al igual que otros tipos de archivos, las fuentes vienen en diferentes formatos. Hay varias docenas de ellos en total, y TTF, EOT, WOFF y SVG se consideran los más populares de los que se utilizan en la red. Además, cada uno es compatible solo con ciertas versiones del software.

Además de pertenecer a sistemas específicos, difieren en la tecnología de representación de caracteres y el método de compresión. El volumen del archivo recibido depende de este último, lo que afecta directamente el tiempo de su descarga y, por lo tanto, la velocidad de visualización de la página. Esto es crítico solo cuando se instala una nueva fuente, ya que después de descargar el archivo que la contiene se almacenará en el caché. Actualmente, al incrustar una fuente específica en un sitio, es necesario preparar todos estos formatos de fuente: TTF (u OTF), WOFF, EOT y SVG.

Conexión de fuentes de Google

Para facilitar el trabajo con fuentes, Google creó el servicio Fuentes, que contiene varios cientos de fuentes, incluidas docenas de fuentes cirílicas.

Después de seleccionar las fuentes deseadas, que pueden ser varias, el servicio forma una ventana minimizada con los modos "estándar" e "importar", cada uno de los cuales tiene dos tipos de código:

  • agregar especial. una línea al título del documento HTML entre las etiquetas + escribir la combinación deseada en el archivo CSS;
  • o escribe otra línea entre las etiquetas