Como usar una fuente de google fonts en un tema de drupal 8

imagen
imagen selección google fonts

Si usted tiene un sitio en drupal 8 o lo va a hacer, la solución más sencilla es usar el módulo @font-your-face configurar la fuente y nada más (igual y vale la pena también explicar como hacer eso verdad?).

Pero que pasa si lo que se quiere es agregar una fuente de google font y probablemente de otros servicios a un tema? Entonces parece no todo ser tan claro.

Bueno estos son los pasos gracias a el sitio de duntuk.com donde documentaron esta solución:


Primero se nombredetutema.info.yml que es donde estan los datos del tema (su nombre, si e sun subtema, etc)

En el se pone:

libraries:

  - 'nombredetutema/fonts'


Un detalle es probable, que ya tengas la parte de libraries y declaraciones a el css a  global styling, asi que probablemente solo tengas que agreagr la parte de:   - 'nombredetutema/fonts'

Al hacer este paso lo que estamos añadiendo es una linea que se usara en el segundo paso.

El segundo paso es escribir o crear el archivo nombredetutema.libraries.yml. En este archivo es donde se colocan realmente las rutas a cosas como archivos de javascript o css.

En este caso lo que se coloca en el archivo es:

fonts:

  css:

    theme:

      '//fonts.googleapis.com/css?family=Josefin+Sans:300italic,400,300,700|Open+Sans:300italic,400,300': { type: external, minified: true }


Como se puede ver en parte es el código que se copia de google fonts, más los tamaños (pesos) de fuente que se quieren usar.

Tambiébn como se puedenver se pueden usar más de una fuente separando con una pleca (pipe symbol).

Con esto y aplicando en el css del tema la fuente, se puede empezar a usar.

Categorias
Versión

Añadir nuevo comentario

El contenido de este campo se mantiene privado y no se mostrará públicamente.

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.