Cómo utilizar la fuente Adsense Roboto en WordPress

Si está ejecutando un blog y utiliza Google Adsense para monetizar su blog. Es posible que sepa que hay muchas formas de mejorar el rendimiento de Adsense. Este artículo demuestra cómo hacer que la fuente del blog sea como la fuente de Google Adsense, de modo que los anuncios parezcan parte del contenido. Supongo que tiene conocimientos básicos de CSS y HTML, y está utilizando WordPress.

Google Adsense ofrece 8 tipos diferentes de familias de fuentes, como Open Sans, Open Sans Light, Roboto Light, Ubuntu Light, Lori, etc. Las he probado todas, Roboto Light funciona mejor para mi sitio. En realidad, es la familia de fuentes predeterminada si se elige «Familia de fuentes predeterminada». A continuación, se mostrará cómo configurar la fuente Roboto para blogs de WordPress.

Paso 1: identificar la familia de fuentes que utiliza Google Adsense

Puede elegir la familia de fuentes en su cuenta de Google Adsense de la siguiente manera:

Además, desea conocer las propiedades de tamaño, interlineado, altura y peso de la fuente. Por lo tanto, es posible que desee instalar el complemento firebug. Está disponible para Chrome y Firefox. Puede inspeccionar el estilo de fuente de los elementos puntiagudos.

Paso 2: obtenga la fuente del sitio web de Google Fonts

Todas las fuentes de Adsense, o fuentes similares, se pueden encontrar en el sitio de fuentes de Google: https://www.google.com/fonts

Vaya al sitio de Google Fonts y busque «Roboto»:

Haga clic en el botón de flecha hacia la derecha para «Uso rápido»:

Elige el estilo aquí:

Copie el código de la fuente Roboto:

Este es el código que necesitará finalmente: (Puede usar esta línea directamente en su blog)

<link href='http://fonts.googleapis.com/css?family=Roboto:300' 
      rel='stylesheet' type='text/css'>

Paso 3: configura la fuente para tu blog

Vaya al editor de temas de WordPress, edite el archivo header.php, coloque el código «» entre «» y «» y guárdelo. Ahora ha incluido la familia de fuentes Roboto.

El último paso es configurar CSS para las etiquetas HTML que desea cambiar. Vaya de nuevo a su editor de temas de wordpress, edite el archivo styles.css.

En mi caso, quiero cambiar la etiqueta , así que inserto el siguiente código en el archivo css.

.entrybody strong, .entrybody strong a:hover, .entrybody strong a  {
	color:#333333;
	font-weight:300;
	line-height:150%;
	text-decoration:none;
        font-faimily: 'Roboto',arial,sans-serif;
	font-size:29px;
	line-height: 34px;
 	letter-spacing:-1px;
}