¿Cómo obtener fuentes suaves de Google?

2 minutos de lectura

Anteriormente usaba el complemento Fuentes de Google WPque tampoco tiene la función solicitada.

Por ahora estoy usando las fuentes de Google con una función implementada en el tema que se usa actualmente. Las fuentes se incrustan sin problemas y se muestran correctamente.

Por ahora, hay muchos blogs con fuentes suaves y agradables de leer para pantallas HD y también quiero esas fuentes. Como se ve en mi WordPress, es capaz de mostrarlos, ejemplo a continuación:

ingrese la descripción de la imagen aquí

No hay bordes afilados, ni píxeles, etc. Así es como me gustaría.

Seleccioné “Droid Sans” actualmente como fuente para mis artículos. Pero esta fuente aparece CON bordes afilados y pixelada. Ejemplo a continuación:

ingrese la descripción de la imagen aquí
(Tenga en cuenta que abrir esta imagen en una nueva pestaña muestra el problema mucho más claramente).

¿Hay algo para que esto se vea suave y genial?

  • ¿Es solo la fuente incorrecta? No estoy obligado a eso y probé algunas otras fuentes. Todos parecen tener esos bordes afilados. Si conoce una fuente para comparar, anótela.
  • ¿Hay algún fragmento de CSS que deba agregar?
  • ¿Es una configuración del lado del servidor?

¿Cómo puedo lograr fuentes suaves en mi página de artículos?

avatar de usuario
Jacobo

Puede depender del navegador que estés usando.

Tiendo a usar:

 -webkit-font-smoothing: antialiased;

o si tiene texto en negrita borroso:

-webkit-filter: blur(0.000001px);

en navegadores webkit.


Alternativamente, puede agregar una sombra de texto para que el texto parezca más suave

 html, html a {
      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 }

También le recomiendo que pruebe diferentes tamaños de fuente, ya que algunas fuentes personalizadas solo se verán bien en ciertos tamaños.

Aparte de eso, no hay mucho que puedas hacer además de usar otra fuente. Google Chrome acaba de lanzar una actualización para fuentes más suaves. También podría ser útil mirar las fuentes svg:

Fuentes de Google & http://www.fontspring.com/demos/svg-vs-woff/

  • Rofl, acabo de usar otra fuente y funciona muy bien. Mi fuente (y algunas otras) se ven terribles a 16px. Probé tu código ahora en una página HTML pequeña y simple y funciona. ¡Gracias por eso!

    – Trollwut

    20/02/2014 a las 23:00

Resolví este problema usando fuentes de Google como SVG:

<style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
 </style>

¿Ha sido útil esta solución?