{"id":83942,"date":"2022-10-09T18:59:05","date_gmt":"2022-10-09T16:59:05","guid":{"rendered":"https:\/\/rmarketingdigital.com\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/"},"modified":"2021-07-06T09:36:55","modified_gmt":"2021-07-06T07:36:55","slug":"evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/","title":{"rendered":"Avoid layout change and flashes of invisible text (FOIT) by preloading optional fonts"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#Compatibilidad-del-navegador\" >Browser compatibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#Representacion-de-fuentes\" >Font representation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#Fuentes-opcionales\" >Optional fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#Conclusion\" >conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          A partir de Chrome 83, enlace rel = \u00abpreload\u00bb y font-display: opcional se puede combinar para borrar el jank de dise\u00f1o por completo\n        <\/p>\n<p>\n          <time>March 18, 2020<\/time><\/p>\n<\/header>\n<div class=\"w-aside w-aside--note\">\n<p>En Chrome 83, se han realizado nuevas mejoras en la carga de fuentes para borrar por completo el cambio de dise\u00f1o y el destello de texto invisible (FOIT) cuando las fuentes opcionales est\u00e1n precargadas.<\/p>\n<\/div>\n<p>Al aprovechar al m\u00e1ximo los ciclos de renderizado, Chrome 83 elimina el cambio de dise\u00f1o al precargar fuentes opcionales.  Combinatorio <code><\/code> with <code>font-display: optional<\/code> es la forma m\u00e1s eficaz de asegurar que no haya problemas de dise\u00f1o al renderizar fuentes personalizadas.<\/p>\n<h2 id=\"compatibility\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Browser compatibility <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Consulte los datos de MDN para conseguir informaci\u00f3n actualizada sobre compatibilidad entre navegadores:<\/p>\n<h2 id=\"font-rendering\"><span class=\"ez-toc-section\" id=\"Representacion-de-fuentes\"><\/span>Font representation <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El cambio de dise\u00f1o, o redise\u00f1o, ocurre cuando un recurso en una p\u00e1gina web cambia din\u00e1micamente, lo que resulta en un \u00abcambio\u00bb de contenido.  Conseguir y renderizar fuentes web puede provocar cambios de dise\u00f1o de forma directa de una de estas dos formas:<\/p>\n<ul>\n<li>An alternate font is changed to a new one (&quot;unstyled text flash&quot;)<\/li>\n<li>&quot;Invisible&quot; text is displayed until a new font is rendered on the page (&quot;invisible text flash&quot;)<\/li>\n<\/ul>\n<p>The CSS <code>font-display<\/code>  The property provides a way to modify the rendering behavior of custom fonts through a range of different supported values (<code>car<\/code>, <code>block<\/code>,<br \/>\n<code>swap<\/code>, <code>fallback<\/code>and <code>optional<\/code>).  La elecci\u00f3n del valor a usar depende del comportamiento preferido de las fuentes cargadas de forma asincr\u00f3nica.  A pesar de todo, cada uno de estos valores admitidos puede desencadenar un redise\u00f1o de una de las dos formas enumeradas previamente, \u00a1hasta ahora!<\/p>\n<h2 id=\"optional-fonts\"><span class=\"ez-toc-section\" id=\"Fuentes-opcionales\"><\/span>Optional fonts <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>the <code>font-display<\/code> La propiedad usa una l\u00ednea de tiempo de tres per\u00edodos para manejar las fuentes que deben descargarse antes de que se puedan procesar:<\/p>\n<ul>\n<li><strong>To block:<\/strong> Renders &quot;invisible&quot; text, but switches to the web font as soon as it finishes loading.<\/li>\n<li><strong>To exchange:<\/strong> Renderice el texto utilizando una fuente del sistema de reserva, pero cambie a la fuente web tan pronto como termine de cargarse.<\/li>\n<li><strong>Fail:<\/strong> Render the text with a font from the reservation system.<\/li>\n<\/ul>\n<p>Previamente, las fuentes designadas con <code>font-display: optional<\/code> ten\u00eda un per\u00edodo de bloqueo de 100 ms y ning\u00fan per\u00edodo de intercambio.  Esto significa que el texto \u00abinvisible\u00bb se muestra muy brevemente antes de cambiar a una fuente alternativa.  Si la fuente no se descarga en 100 ms, se utiliza la fuente alternativa y no se produce ning\u00fan intercambio.<\/p>\n<figure class=\"w-figure\">\n  <img alt='previous-behavior-fail-4074840' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/previous-behavior-fail-4074840.png'><figcaption class=\"w-figcaption\">Previous <code>font-display: optional<\/code> behavior in Chrome when the font is downloaded <b>subsequently<\/b> the blocking period of 100 ms<\/figcaption><\/figure>\n<p>A pesar de todo, en el caso de que la fuente se descargue antes de que finalice el per\u00edodo de bloque de 100 ms, la fuente personalizada se procesa y utiliza en la p\u00e1gina.<\/p>\n<figure class=\"w-figure\">\n  <img alt='previous-behavior-pass-7622155' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/previous-behavior-pass-7622155.png'><figcaption class=\"w-figcaption\">Previous <code>font-display: optional<\/code> behavior in Chrome when the font is downloaded <b>before<\/b> the blocking period of 100 ms<\/figcaption><\/figure>\n<p>Chrome renders the page again <strong>twice<\/strong> en ambos casos, independientemente de si se usa la fuente alternativa o si la fuente personalizada termina de cargarse a tiempo.  Esto provoca un ligero parpadeo de texto invisible y, en los casos en que se renderiza una nueva fuente, un tir\u00f3n de dise\u00f1o que mueve parte del contenido de la p\u00e1gina.  Esto sucede inclusive si la fuente se almacena en la memoria cach\u00e9 del disco del navegador y puede cargarse mucho antes de que finalice el per\u00edodo de bloqueo.<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=1040632\">Optimizations<\/a> han aterrizado en Chrome 83 para borrar por completo el primer ciclo de renderizado para fuentes opcionales que est\u00e1n precargadas con <code>&lt;enlace rel=\"preload'&gt;<\/code>.  En cambio, la renderizaci\u00f3n se bloquea hasta que la fuente personalizada haya finalizado de cargarse o haya transcurrido un cierto per\u00edodo de tiempo.  Este per\u00edodo de tiempo de espera se define en este momento en 100 ms, pero ciertamente cambie en un futuro pr\u00f3ximo para aprovechar al m\u00e1ximo el rendimiento.<\/p>\n<figure class=\"w-figure\">\n  <img alt='new-behavior-fail-2200039' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/new-behavior-fail-2200039.png'><figcaption class=\"w-figcaption\">New <code>font-display: optional<\/code> behavior in Chrome when fonts are preloaded and font is downloaded <b>subsequently<\/b> the 100 ms block period (no flashing invisible text)<\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='new-behavior-pass-1394534' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/new-behavior-pass-1394534.png'><figcaption class=\"w-figcaption\">New <code>font-display: optional<\/code> behavior in Chrome when fonts are preloaded and font is downloaded <b>before<\/b> the 100 ms block period (no flashing invisible text)<\/figcaption><\/figure>\n<p>La precarga de fuentes opcionales en Chrome elimina la oportunidad de alteraciones en el dise\u00f1o y destellos de texto sin estilo.  Esto coincide con el comportamiento requerido como se especifica en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/css-fonts-4\/#valdef-font-face-font-display-optional\">CSS fonts level 4 module<\/a> where optional fonts should never cause a redesign and user agents can instead delay rendering for an appropriate period of time.<\/p>\n<p>A\u00fan cuando no hace falta precargar una fuente opcional, mejora enormemente la oportunidad de que se cargue antes del primer ciclo de renderizado, fundamentalmente si todav\u00eda no est\u00e1 almacenada en la cach\u00e9 del navegador.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Chrome team is interested in hearing your experiences preloading optional fonts with these new optimizations in place. Submit a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/entry\">trouble<\/a> if you have any problem or would like to leave some feature suggestion.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>As of Chrome 83, link rel = &quot;preload&quot; and font-display: optional can be combined to erase layout jank completely March 18, 2020 In Chrome ...<\/p>","protected":false},"author":1,"featured_media":83943,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[1434],"class_list":["post-83942","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev","tag-chrome"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"A partir de Chrome 83, enlace rel = &quot;preload&quot; y font-display: opcional se puede combinar para borrar el jank de dise\u00f1o por completo 18 de marzo de 2020 En\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales\" \/>\n<meta property=\"og:description\" content=\"A partir de Chrome 83, enlace rel = &quot;preload&quot; y font-display: opcional se puede combinar para borrar el jank de dise\u00f1o por completo 18 de marzo de 2020 En\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-09T16:59:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4112989.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales\",\"datePublished\":\"2022-10-09T16:59:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/\"},\"wordCount\":867,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4112989.jpg\",\"keywords\":[\"Chrome\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/\",\"name\":\"Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4112989.jpg\",\"datePublished\":\"2022-10-09T16:59:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"A partir de Chrome 83, enlace rel = \\\"preload\\\" y font-display: opcional se puede combinar para borrar el jank de dise\u00f1o por completo 18 de marzo de 2020 En\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4112989.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4112989.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-4112989-3575905-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales - R Marketing Digital","description":"A partir de Chrome 83, enlace rel = \"preload\" y font-display: opcional se puede combinar para borrar el jank de dise\u00f1o por completo 18 de marzo de 2020 En","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/","og_locale":"en_US","og_type":"article","og_title":"Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales","og_description":"A partir de Chrome 83, enlace rel = \"preload\" y font-display: opcional se puede combinar para borrar el jank de dise\u00f1o por completo 18 de marzo de 2020 En","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-09T16:59:05+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4112989.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales","datePublished":"2022-10-09T16:59:05+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/"},"wordCount":867,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4112989.jpg","keywords":["Chrome"],"articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/","url":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/","name":"Evite el cambio de dise\u00f1o y los flashes de texto invisible (FOIT) mediante la precarga de fuentes opcionales - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4112989.jpg","datePublished":"2022-10-09T16:59:05+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"A partir de Chrome 83, enlace rel = \"preload\" y font-display: opcional se puede combinar para borrar el jank de dise\u00f1o por completo 18 de marzo de 2020 En","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/evite-el-cambio-de-diseno-y-los-flashes-de-texto-invisible-foit-mediante-la-precarga-de-fuentes-opcionales\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4112989.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4112989.jpg","width":1200,"height":360,"caption":"hero-4112989-3575905-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=83942"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/83943"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=83942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=83942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=83942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}