Siempre que añadamos tanto javascript como CSS a nuestro Magento 2 debemos buscar siempre la mayor eficiencia y rapidez para no acabar sobrecargando nuestra tienda. Esto también es así con las fuentes que utilizamos por eso recomendamos el uso de Google Fonts.
¿Qué es Google Fonts?
Se trata de un amplio repositorio de fuentes de código abierto de Google. Entre sus principales características destacan:
- Variedad. A día de hoy estamos hablando de casi mil fuentes que existen en este repositorio y de todo tipo, con o sin serifa, monospace, estilo handwriting, etc.
- Compatibildiad. Las tipografías pertenecientes a Google Fonts son compatibles con todos los dispositivos, navegadores, sistemas operativos, etc. por lo que ya no deberemos preocuparnos por utilizar fuentes «seguras».
- Rapidez de carga. Otra característica que tiene Google Font es la optimización de carga y el leve pese de sus fuentes.
¿Cómo utilizo Google Fonts en Magento 2?
Realmente se trata de añadir un archivo css externo por lo que si partimos de la documentación oficial de Magento 2, simplemente tendríamos que crear un archivo default_head_blocks.xml o editar el que tenemos en <directorio_theme>/Magento_Theme/layout/default_head_blocks.xml. Por ejemplo, si el nuestro por defecto es algo así:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/my-styles.css"/> <script src="Magento_Catalog::js/sample1.js"/> <link src="js/sample.js"/> <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" /> </head> </page>
Simplemente añadiríamos la fuente que querramos utilizar en nuestro Magento 2, como podría ser la Montserrat y ponerla en el archivo que indicamos anteriormente, dejándolo así:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/my-styles.css"/> <script src="Magento_Catalog::js/sample1.js"/> <link src="js/sample.js"/> <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" /> <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> </head> </page>
Con esto ya tendríamos nuestra Google Font añadida a Magento 2 y podremos utilizarla al igual que en cualquier otra web. Partiendo de lo que tenemos en nuestro default_head_blocks.xml, solo tendríamos que usarla en el archivo css/my-styles.css de esta forma y se convertiría en la fuente por defecto de nuestra tienda:
* {
font-family: 'Montserrat', sans-serif;
}