Aviso de cookies

Estoy de acuerdo Este sitio web guarda pequeños fragmentos de información (cookies) en su dispositivo con la finalidad de ofrecer un mejor contenido y para finalidades estadísticas. Usted puede desactivar el uso de cookies modificando la configuración de su navegador. Navegar por nuestro sitio web sin cambiar la configuración del navegador hace que usted nos esté autorizando a guardar esta información en su dispositivo.

Instalar Open Sans en un proyecto de Django y CKEditor

24 de Julio de 2016 a las 16:37| programacion , Django

Estoy migrando mi blog de WordpressDjango y en el desarrollo del proyecto quería cambiar el tipo de letra que utilizaba el blog y no utilizar la misma fuentes que utilizaba en Wordpress. Como no tengo muchos conocimiento en diseño, pedí consejo a un amigo desarrollador, que me recomendó que mirase en Google Font,  y en concreto la fuente Open Sans. Mire en la página de Google esa fuente y me gusto, la seleccione para utilizarla en mi futuro blog en Django.

En este artículo se explicara como instalar Open Sans en un proyecto y las diferentes formas que encontré para hacerlo. En el blog en Django utilizo CKEditorque proporciona una serie de botones para la edición de textopara escribir los artículos, también se vera la integración con Open Sans.

 

Formato WOFF y WOFF2

Lo primero es descargarse la fuente Open Sans desde Google Fonts, se  descarga un zip  con multiple archivos .ttf, que un fomato para las fuentes, cada archivo representa un estilo de la fuente Open Sans.

Aunque los archivos .ttf son el estándar para las  fuentes, hay otros formatos que son mas específicos y ahí están los formatos woff (Web Open Font Format) y woff2,que estan diseñados para ser utilizados  en páginas web, entre sus características proporcionan comprensión. Como desventajas tenemos la compatibilidad con algunas versiones antiguas de navegadores, por ese motivo es aconsejable utilizar varios formatos de fuente en nuestro proyecto, mas adelante se vera como hacerlo.

 

WOFF y WOFF2 en nuestro proyecto Django

Como ejemplo de proyecto Django, tenemos un blog y queremos utilizar un tipo de letra especifico, Open Sans , que hemos descargado de Google Fonts. Primero se vera como instalar este tipo de letra en nuestro proyecto y después somo utilizar este tipo de fuente mediante una url, evitando tener que descargarla.

El fichero de descargado es un zip donde se encuentra todos los estilos de Open Sans, desde Google Fonts podemos seleccionar los estilos a descargar, cuando descomprimimos el fichero obtenemos una serie de ficheros en formato ttf, cada fichero sera un estilo. Como queremos utilizar el formato woff  y woff2, deberemos realizar una conversión.

Para realizar la conversión utilizaremos la página fonts squirrel, enlace, donde podemos realizar la conversión de formato ttf a woff y woff.

Primero debemos subir la fuente en formato ttf , pulsando en Upload Font, despues escogemos el rendimiento de la conversión ( basic, optimal y expert). Por último, aceptamos la licencia, se habilitara un botón para comenzar la conversión.

Como resultado tendremos un fichero zip para descargar, que contendrá diversos fichero y nuestra fuente en formato woff y woff2.

Para instalar las fuentes en nuestro proyecto Django, copiamos las fuentes al directorio fonts que tenemos en static, como su nombre indica en ese sera donde almacenaremos todas las fuentes en sus respectivos formatos.

Hay  diversas formas de insertar el tipo de letra, desde CSS o en HTML,  se verán las dos formas. En mi caso tengo un fichero blog.css donde se describe todos los estilos utilizados en el blog, este fichero se encuentra en la carpeta static/css donde se encuentra todos los ficheros CSS que utilizo.

@font-face

Es una regla que permite cargar fuentes en una pagina web, ya sea en modo local, instaladas en el servidor o de forma online, mediante una dirección web.

 Para incluir una fuente en la web, escribimos la siguiente regla al comienzo de mi fichero blog.css.

@font-face {
font-family: 'OpenSans-Regular';
src: url('../fonts/opensans-regular-webfont.woff2') format("woff2"), 
url('../fonts/opensans-regular-webfont.woff') format("woff"),url('../fonts/OpenSans-Regular.ttf') format("ttf");
}

Esta regla carga una fuente que tenemos en el servidor instalada

  • font-family: Especifica un nombre para la fuente, que es utilizado para  llamar a esta fuente desde cualquier parte del archivo CSS.
  • src: Se utiliza para indicar la localización de los archivos de las  fuentes, mediante la opcion url,  indicamos la localización de esos archivos. Esta localización puede ser local, indicando la ruta de directorio donde se encuentra el archivo, o de forma online mediante una dirección web. Dentro de url podemos utilizar format para especificar al navegador el formato de la fuente descrita . Es muy aconsejable utilizar varios formatos de fuentes, para no tener problemas de compatibilidad con los navegadores web.

La regla @font-face dispone de varias propiedades, aunque no se explicaran en este artículo,  para mas información aquí.

Ejemplo de url con localización online.

src: url(https://fonts.googleapis.com/css?family=Open+Sans:semibold);

Donde se indica que se va utilizar la fuente Open Sans con el estilo Semibold.

Ahora tendríamos que recorrer el archivo CSS y donde veamos un font-family llamar en primer lugar a OpenSans-regular para utilizarla.

@import

La regla @font-face, es muy útil cuando la fuente a utilizar la tenemos instalada en el servidor y queremos personalizarla, pero en algunos casos eso no es posible por diversos motivos. En estos casos tenemos como la alternativa la regla @importdonde podemos cargar la fuente mediante una dirección web. como ejemplo, al principio del archivo CSS pondríamos.

@import url(//fonts.googleapis.com/css?family=Open+Sans)

Esta regla es mas sencilla que @font-face,aunque no tiene tantas opciones de configuración como font-face.

 

HTML

Aunque las reglas anteriores se han visto desde el ámbito de CSS, también pueden escribirse en archivos HTML usando una etiqueta link,. Por ejemplo.

<link href='//fonts.googleapis.com css?family=Open+Sans'rel='stylesheet' type='text/css'/>

Esta etiqueta debe situarse en la sección <head> del archivo HTML, para usar la fuente se debe poner 'Open Sans'   en  font-family del archivo CSS de nuestra web.

Aunque podemos cargar la fuente desde HTML y funciona correctamente, es mas aconsejable hacerlo desde CSS, para respetar la funcionalidad de cada lenguaje, CSS para el diseño y HTML para la estructura de la web.

 

CKEditor

Existe un plugins para utilizar Google Fonts en CKEditor pero no funciona para versiones mas modernas y no conseguí que funcionara para la versión que tenia instalada.

Como alternativa, lo que  hice fue que la fuente Open Sans fuera utilizada por defecto en CKEditor. Para esto, solo necesitamos buscar el archivo content.css dentro de la instalación de CKEditor y utilizar la regla @font-face o @import como se ha descrito anteriormente, todos los post que se escriban estarán con la fuente Open-Sans.

 

Generar PDF de Instalar Open Sans en un proyecto de Django y CKEditor