¿Por qué una fuente se ve pixelada en mi página cuando se muestra sin problemas en Google Fonts?

Estoy tratando de usar Merriweather y Source Sans Pro para mi sitio web. Estas fuentes se ven impecables en el sitio web de Google Fonts. Sin embargo, cuando trato de usarlos en mis páginas web, se ven pixelados. Incluso en el mismo navegador que las muestra perfectamente en la web de Google Fonts. Por ejemplo

ingrese la descripción de la imagen aquí

Ambas líneas se ven pixeladas. Sobre todo el primero ade la rúbrica.

¿Algún consejo sobre cuál podría ser el problema?

No estoy seguro de lo que quieres decir. Las fuentes se procesan con píxeles... su imagen tiene suavizado. ¿Quizás mostrar una comparación con la fuente en el mismo tamaño y color que en Google Fonts?

Respuestas (2)

No veo nada que describiría como "pixelizado". Más bien, se parece más a un problema de renderizado. He probado esto en el sitio de Google Fonts, y con un documento HTML simple, ambos vistos en Firefox y Chrome (Windows 10), con texto del mismo tamaño, y el renderizado me parece idéntico.

Sin embargo, he notado que la "a" no se ve tan bien en algunos tamaños de fuente.

A 36 px, la curva del piso superior de la "a" se engrosa. Mientras que a 35px se ve mucho mejor. En cuanto a la fuente del problema, no estoy seguro. Tal vez sea un problema de Win10, un problema de representación del navegador o tal vez el diseño de la fuente en sí.

ingrese la descripción de la imagen aquí

Aquí está el HTML si alguien quiere probarlo:

 <!DOCTYPE html>
<html>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet"> 
<body>

<h1 style="font-family: 'Merriweather', serif; font-size: 36px; font-weight: 700;">Leader election in Go</h1>
<h1 style="font-family: 'Merriweather', serif; font-size: 35px; font-weight: 700;">Leader election in Go</h1>

</body>
</html>

Es un problema común con las fuentes que se representan en la web. Hay una solución css antigua que suavizará la apariencia, combinando aún más la representación de subpíxeles.

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
¿Por qué una fuente se ve pixelada en mi página cuando se muestra sin problemas en Google Fonts?
RespuestasAquíPolítica de privacidad1y, 0v