{"id":132758,"date":"2022-09-11T19:52:45","date_gmt":"2022-09-11T14:22:45","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=132758"},"modified":"2022-09-11T19:52:46","modified_gmt":"2022-09-11T14:22:46","slug":"how-to-ensure-text-remains-visible-during-web-font-load-astra","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-ensure-text-remains-visible-during-web-font-load-astra\/","title":{"rendered":"C\u00f3mo garantizar que el texto permanezca visible durante la carga de fuentes web Astra"},"content":{"rendered":"

Al analizar el sitio web con PageSpeed Insight, es posible que de vez en cuando se encuentre con este error que dice \"Ensure text remains visinle during web font load\". En este documento, vamos a explicar c\u00f3mo solucionar este error durante el uso del tema Astra.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 se produce este error?<\/h3>\n\n\n\n

Cuando un navegador detecta que un texto tiene aplicada una fuente personalizada, espera a que \u00e9sta se descargue. El texto permanecer\u00e1 invisible hasta entonces. La fuente personalizada se utiliza inmediatamente despu\u00e9s de que haya terminado de descargarse. Esto normalmente no ocurre si se utilizan las fuentes predeterminadas; sin embargo, ocurre sobre todo cuando se utiliza una fuente personalizada o se utiliza un plugin para insertar las fuentes personalizadas. <\/p>\n\n\n\n

Cuando se comprueba la velocidad del sitio web, esta reacci\u00f3n del navegador es la responsable de mostrar el error \"Aseg\u00farese de que el texto permanece visible durante la carga de la fuente web\".<\/p>\n\n\n\n

\u00bfC\u00f3mo rectificar este error?<\/h3>\n\n\n\n

Para rectificar este error, tendr\u00e1 que asegurarse de que durante el tiempo que el navegador carga su fuente personalizada, deber\u00eda mostrar las fuentes por defecto. Una vez que el navegador descargue las fuentes personalizadas, deber\u00e1 cambiar las fuentes predeterminadas por las personalizadas. <\/p>\n\n\n\n

Fuentes Google<\/h3>\n\n\n\n

Para las fuentes de Google, puede utilizar el plugin \"Swap Google Fonts Display\", que puede descargarse de aqu\u00ed<\/a>. Una vez descargado e instalado el plugin, buscar\u00e1 autom\u00e1ticamente cualquier script de Google Fonts y a\u00f1adir\u00e1\u00a0display=swap<\/code>\u00a0a la URL. Esto garantizar\u00e1 que el navegador cargue las fuentes deafult durante el tiempo en que se descarguen las fuentes personalizadas.<\/p>\n\n\n\n

\"ast-swap-google-fonts\"<\/figure>\n\n\n\n

Otras fuentes<\/h3>\n\n\n\n

Cuando se utiliza un plugin para insertar fuentes personalizadas en su sitio web, tendr\u00e1 que ponerse en contacto con los creadores del plugin o puede editar el c\u00f3digo del plugin. He aqu\u00ed un ejemplo de c\u00f3mo editar el c\u00f3digo del plugin. En este ejemplo, estamos utilizando un plugin desarrollado por nosotros llamado \"Custom Font\". <\/p>\n\n\n\n

Paso 1:<\/strong> En el panel de control de WordPress, vaya a Plugins y seleccione Editor de archivos de plugins<\/p>\n\n\n\n

\"Astra<\/a><\/figure>\n\n\n\n

Segundo paso: <\/strong>Seleccione el plugin responsable de inyectar fuentes personalizadas en su sitio web.<\/p>\n\n\n\n

Paso 3:<\/strong> Localice el archivo .css dentro del c\u00f3digo del plugin. En nuestro caso el archivo CSS se encuentra dentro de assets>CSS>bsf-custom-font.css. Tenga en cuenta que cada plugin tendr\u00e1 diferentes rutas para el archivo CSS. Por favor, p\u00f3ngase en contacto con los creadores del plugin, si no est\u00e1 seguro de d\u00f3nde encontrar el archivo css de la fuente personalizada.<\/p>\n\n\n\n

Paso 4: <\/strong>Copie y pegue el c\u00f3digo que aparece a continuaci\u00f3n en la parte inferior del archivo .css y haga clic en el bot\u00f3n Actualizar archivo.<\/p>\n\n\n\n

@font-face{\n\tfont-family: cambodian\n\tfont-display: swap;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Una vez seguidos los pasos, el error \"Ensure text remains visinle during web font load\" estar\u00e1 solucionado.<\/p>","protected":false},"excerpt":{"rendered":"
Al analizar el sitio web con PageSpeed Insight, es posible que de vez en cuando se encuentre con este error que dice \"Ensure text remains visinle during web font load\". En este documento, le explicaremos c\u00f3mo solucionar este error mientras utiliza el tema Astra. \u00bfPor qu\u00e9 se produce este error? Cuando un navegador detecta que un texto tiene un [...]<\/p>","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[1598],"docs_tag":[],"class_list":{"0":"post-132758","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-troubleshooting"},"spectra_custom_meta":{"wp_last_modified_info":["September 11, 2022 @ 7:52 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_edit_lock":["1662906168:86"],"_wplmi_last_modified":["2022-09-11 19:52:46"],"rank_math_internal_links_processed":["1"],"rank_math_primary_docs_category":["1598"],"rank_math_seo_score":["24"],"_edit_last":["86"],"pfd_related_docs":[""],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"rank_math_analytic_object_id":["1931"],"views":["6312"],"helpful":["1"],"unhelpful":["5"],"redirects":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"69ce8cb69b8f2c36110672af79f952ad\";s:6:\"images\";a:1:{i:0;i:132760;}}"],"_trp_automatically_translated_slug_es_ES":["como-garantizar-que-el-texto-permanezca-visible-durante-la-carga-de-fuentes-web-astra"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Arindam","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/arindamm\/"},"uagb_comment_info":0,"uagb_excerpt":"When you analyze the website with PageSpeed Insight, you might encounter this error that “Ensure text remains visinle during web font load” from time to time. In this document, we will explain how to fix this error while using the Astra theme. Why this error occurs? When a browser detects that a text has a…","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132758"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=132758"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132758\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=132758"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=132758"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=132758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}