serif montserrat googleapis google español droid html css google-chrome google-webfonts

html - montserrat - Google Fonts no está renderizando en Google Chrome



google fonts montserrat (15)

Si la solución css no funciona para usted

En caso de que la primera publicación calificada no funcione, aquí hay una solución:

eliminar el ''http:'' en:

<link href=''http://fonts.googleapis.com/css?family=Alfa+Slab+One'' rel=''stylesheet'' type=''text/css''>

o

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

Como explica David Bain , la mayoría de los navegadores modernos en realidad no requieren que especifiques el protocolo, "deducirán" el protocolo según el contexto desde el que lo llamaste

Estoy construyendo un nuevo tema de WordPress (no sé si eso es relevante) y hay un problema que me sigue molestando.

Cargué Roboto Slab en Google Webfonts (incluido el CSS en la sección <head> ). En todos los otros navegadores, la fuente se procesa correctamente, excepto Google Chrome. Cuando cargué por primera vez el sitio web en Google Chrome, los textos que usan esa fuente personalizada NO se muestran EN ABSOLUTO (aunque la pila de fuentes tiene a Georgia como alternativa: "Roboto Slab", Georgia, serif; ). Después de desplazar el enlace con estilo o reactivar cualquier propiedad de CSS en Inspector, los textos se vuelven visibles.

Desde que empecé el tema hace algún tiempo, puedo recordar claramente que funcionaba perfectamente antes. ¿Es este un error reciente conocido de actualización de Chrome?

Primera carga : una captura de pantalla n. ° 1

Después de volver a aplicar cualquiera de las propiedades de CSS, entrar en una vista receptiva o desplazarme sobre un elemento : una captura de pantalla n.º 2

¿Alguien tiene problemas similares? ¿Cómo debo proceder con esto?

¡Gracias!

Acabo de enfrentar el mismo problema. I fue debido a la falta de correspondencia del protocolo HTTP / S como se describe aquí .

Use la versión https de la URL.

Acabo de utilizar para eliminar la fuente roboto de mis fuentes de Windows y todo funciona en este momento.

es tal vez porque tienes una versión anterior de la fuente en tu sistema. supongo .

Aparentemente es un error conocido de Chrome . Hay una solución alternativa de solo CSS que debería resolver el problema:

body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } }

Parece que a Chrome solo le deben decir que vuelva a pintar el texto

Es posible que el elemento tenga text-rendering: optimizeLegibility set que puede causar esto o problemas similares. Cambiarlo a auto solucionó este problema con un proyecto de Foundation 5 que lo configura para optimizeLegibility de forma predeterminada.

Estaba tratando de trabajar con la respuesta de Meg, pero como muchos otros tampoco funcionó para mí.

Para usar Google Font, encontré este truco [Agregar capturas de pantalla para conocer los pasos].

1) Simplemente tome la url del css o enlace estándar como se resalta.

2) Abra el enlace en otra pestaña, copie el código CSS completo (es decir, font-face) en su archivo css y ejecútelo.

No estoy seguro del rendimiento ya que muchas llamadas http se están agregando, o simplemente intento copiar una fuente.

Imagen para el paso 1

Imagen para el paso 2

He incorporado el CSS anterior ... pero TAMBIÉN estoy incluyendo el siguiente javascript en mi encabezado:

(Tenga en cuenta que sé que no he personalizado las fuentes en el código siguiente. Sin embargo, parece que ayuda a forzar a Chrome a volver a pintar las fuentes en la página ... solo asegúrese de que las fuentes estén referenciadas correctamente en otro lugar)

Con el CSS mencionado anteriormente usado junto con el siguiente código incluido en mi ... en el peor, todas las fuentes en mi página aparecerán después de un segundo de retraso.

Espero que esto ayude a la gente. Aclamaciones.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { $(''body'').hide().show(); }); </script> <script type="text/javascript"> //JavaScript goes here WebFontConfig = { google: { families: [''FontOne'', ''FontTwo''] }, fontinactive: function (fontFamily, fontDescription) { //Something went wrong! Let''s load our local fonts. WebFontConfig = { custom: { families: [''FontOne'', ''FontTwo''], urls: [''font-one.css'', ''font-two.css''] } }; loadFonts(); } }; function loadFonts() { var wf = document.createElement(''script''); wf.src = (''https:'' == document.location.protocol ? ''https'' : ''http'') + ''://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js''; wf.type = ''text/javascript''; wf.async = ''true''; var s = document.getElementsByTagName(''script'')[0]; s.parentNode.insertBefore(wf, s); } (function () { //Once document is ready, load the fonts. loadFonts(); })(); </script>

Aquí es donde encontré lo anterior: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

Intenté solucionar el css solo arriba sin éxito. Finalmente se resolvió creando una hoja de estilo (chrome.css) que contenía:

body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @@-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } }

Y cargarlo con jquery en la parte inferior de la página:

<script type="text/javascript"> $(document).ready(function () { $(''head'').append(''<link href="/chrome.css" rel="stylesheet" />''); }); </script>

La corrección de CSS no funcionó para mí, también el script de demora de 0.5 segundos parece incómodo.

Este fragmento de JS parece funcionar para nosotros:

<script type="text/javascript"> jQuery(function($) { if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) { $(''body'').css(''opacity'', ''1.0'') } }) </script>

Lo solucioné con la solución JS, pero también necesité usar el último jquery alojado en google (1.11) para solucionarlo.

No es una solución real, pero funciona mejor para mí que todo lo demás en este hilo. Cambié la fuente. Tenía Fira Sans y ahora solo cambié a Roboto, que funciona de la caja.

Puede que no sea una solución mágica, pero solucione el problema en nuestro sitio moviendo el enlace fontawesome css a la parte inferior de nuestras páginas, así como la solución similar a la web enumerada anteriormente.

Si las personas siguen teniendo este problema antes de probar todas las excelentes soluciones aquí, intente utilizar una etiqueta! Important en su CSS para ver si eso lo solucionará, como lo hizo para mí y no estoy seguro si el error es el mismo que el viejo error de Chrome.

.faultyText {"Roboto Slab", Georgia, serif !important}