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:

Deja una respuesta

Suscríbete