AMP font: agregar Google font en amp plugin by automattic de wordpress

Cuándo utilizamos el plugin oficial de wordpress para AMP no nos da muchas opciones para editar desde el dashboard, en esta breve guía veremos cómo cambiar los amp font, fonts o tipografías por defecto.

Naturalmente existen más plugins que nos proveen más opciones de edición; pero, por un tema de confianza, muchos de nosotros preferimos utilizar las versiones oficiales.

Lo primero que debemos hacer para cambiar los amp font o tipografías por defecto, es elegir nuestra preferida en el catálogo de fuentes tipográficas de Google font

Página inicial del catálogo de Google Font

Podemos navegar e identificar qué letra es de nuestro agrado. Si ya tenemos un tipo de letra pensado, podemos hacer uso del cuadro de búsqueda.

Cuándo ya tengamos identificada la letra, le damos click al botón con signo de más. Nos aparecerá una pestaña abajo, la cuál abriremos y prestaremos atención a (1) la url del tipo de letra ’embed font’ y (2) la forma de usarlo en css ‘Specify in css’. Si lo requieren, pueden ir a la pestaña ‘customize’ para elegir los grosores de la fuente. Para este caso particular, seleccioné también el ‘black 900’ para mis títulos

Lo siguiente para cambiar las amp font o tipografías, es dirigirnos al functions.php de nuestro wordpress theme y pegar este código que agregará las fuentes en la cabecera de nuestra versión AMP. [hay que reemplazar la url por el de nuestra fuente elegida en google fonts

//Agregar Google fonts
add_action( 'amp_post_template_head', 'amp_google_font_tecneofito');
function amp_google_font_tecneofito( $amp_template ) {
    $font_urls = $amp_template->get( 'font_urls', array() );
    $font_urls['googlefonts'] = 'https://fonts.googleapis.com/css?family=Roboto:400,900';  ?>
    <link rel="stylesheet" href="<?php echo esc_url( $font_urls['googlefonts'] ); ?>">
<?php }

De seguida pegamos el siguiente código que nos permitirá inserta estilos personalizado, los estilos que agregaré son body (para la tipografía general), y .amp-wp-title (para el grosor del título)

//Agregar estilos personalizados
add_action( 'amp_post_template_css', 'tecneofito_amp_css_styles' );
function tecneofito_amp_css_styles( $amp_template ) { ?>
    body { 
      font-family: 'Roboto', sans-serif;
    }
    .amp-wp-title {
      font-weight: 900;
    }
<?php }

Entonces, pasamos de esto a esto:

Mira más contenido relacionado

Por qué es importante que tu negocio tenga un chatbot

por Jhon Torres, septiembre 28, 2018

¿Eres propietario de un negocio? ¿Su negocio realmente necesita chatbots? En los...

Google lanza oficialmente Chrome OS 69 con soporte nativo para Linux

por Jhon Torres, septiembre 19, 2018

Google lanzó oficialmente Chrome OS 69 el martes 18 de setiembre, trayendo consigo...

Sistema fotovoltaico para la electrificación rural en el Perú

por Manuel Zambrano Spicer, septiembre 4, 2018

Se necesita infraestructura productiva (vial, energética, agropecuaria, industrial y...

Cómo crear una página de inicio de sesión personalizada en WordPress

por Jhon Torres, agosto 22, 2018

La página de inicio de sesión por defecto de WordPress en wp-login.php, se ve...

7 herramientas y recursos gratuitos para crear mi primer canal de youtube

por Jhon Torres, junio 13, 2018

Para algunas pequeñas empresas y organizaciones, crear una biblioteca de contenido de...

Cómo agregar el sistema de comentarios de Facebook en WordPress

por Jhon Torres, marzo 7, 2018

¿Como agregar el sistema de comentarios de Facebook en mi sitio web en...