¿Cuántos de ustedes probaron el diseño de su sitio web en diferentes navegadores y computadoras antes de lanzar el sitio? Apuesto a que pocos de ustedes lo hacen. ¿Sabe que lo que se ve bien en un sistema operativo (por ejemplo, Mac) puede verse realmente mal en otro, como Windows? La razón principal es que las fuentes utilizadas en el sistema Mac no están disponibles en el sistema operativo Windows. La computadora usa una fuente sustituta (sin la fuente) y esto realmente puede arruinar su diseño web. Una buena forma de superar esto es utilizar una fuente web que sea compatible con la mayoría de los navegadores, de modo que su sitio se vea esencialmente igual independientemente del navegador o computadora que esté usando.
Durante la conferencia de desarrolladores de E / S en junio de 2010, Google presentó Google Font , una serie de fuentes de código abierto que puede incrustar y utilizar en su sitio. Todas las fuentes están alojadas en el servidor de Google, por lo que cualquier navegador puede utilizarlas sin mucho esfuerzo. Por el momento, hay 18 fuentes diferentes (a partir de esta publicación) entre las que puede elegir y estoy seguro de que se agregarán más a la biblioteca en el futuro.
Vista previa de la fuente
Índice
Además de la fuente de Google, Google también lanzó la vista previa de fuentes de Google que le permite obtener una vista previa de la fuente antes de incrustarla en su sitio.
El uso es sencillo. Solo tiene que escribir un texto personalizado, jugar con la configuración (familia de fuentes, tamaño, variantes, espaciado, etc.) para encontrar la mejor opción para su sitio.
Una vez que esté satisfecho con el resultado, simplemente tome el código e introdúzcalo en el diseño de su sitio.
Incrustar Google Font en su sitio de WordPress
Si está utilizando un blog impulsado por WP, aquí le mostramos cómo puede incrustar y usar la fuente de Google en su sitio.
Vaya a Google Font , busque su fuente favorita y tome el código “Insertar”. Por ejemplo:
<link href = "http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic" rel = "stylesheet" type = "text / css">
Abre el archivo “header.php” en la carpeta de tu tema activo. Inserte el código antes de la etiqueta </head>.
Para usar la fuente de Google en todo el sitio, abra su archivo “style.css” de la carpeta del tema activo y pegue el código restante que tomó del sitio de fuentes de Google.
cuerpo { familia de fuentes : 'Cantarell' , serif ; tamaño de fuente : 28px ; estilo de fuente : normal ; peso de fuente : 400 ; sombra de texto : ninguna ; decoración de texto : ninguna ; transformación de texto : ninguna ; espaciado entre letras : 0em ; espaciado entre palabras : 0em ; altura de línea : 1em ; }
Alternativamente, puede cambiar el CSS en consecuencia si solo lo está usando para una pequeña parte de su sitio. Por ejemplo
span .custom_font { familia de fuentes : 'Cantarell' , serif ; tamaño de fuente : 28px ; estilo de fuente : normal ; peso de fuente : 400 ; }
Guarde el archivo header.php y style.css y cárguelos de nuevo a su servidor. Si está utilizando un complemento de caché, no olvide borrar su caché.
Eso es. Pruébelo y háganos saber si le funciona.
Crédito de la imagen: til01
