{"id":52099,"date":"2019-09-19T11:22:40","date_gmt":"2019-09-19T09:22:40","guid":{"rendered":"https:\/\/www.humanlevel.com\/sin-categorizar\/como-optimizar-las-fuentes-de-una-web.html"},"modified":"2021-05-30T09:00:00","modified_gmt":"2021-05-30T07:00:00","slug":"how-to-optimize-the-fonts-of-a-website","status":"publish","type":"post","link":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website","title":{"rendered":"How to optimize the fonts of a website?"},"content":{"rendered":"

\"OptimizeThe more sources<\/strong> we have on a website, the worse the WPO metrics are<\/strong> and the more difficult it is to optimize it for good performance. If we want to have a good balance between performance and design<\/strong>, we should always pay special attention to font optimization<\/strong> and avoid overuse.<\/p>\n

Below are several basic optimization techniques that should always be applied<\/strong>. We will also explain advanced optimization<\/strong> techniques that are not always advisable to apply,<\/strong> so you should measure whether their effect is positive or negative in each situation, especially when adding additional JavaScript code.<\/p>\n

Basic font optimization techniques<\/h2>\n

Use the minimum number of sources possible<\/h3>\n

We must try to homogenize the design using the minimum number of sources possible<\/strong>, being the ideal for zero yield.<\/p>\n\n

If we are concerned about the performance of our site, above the design or brand image, the ideal is to optimize the downloading and painting, using directly the font of the user’s operating system. In this way we avoid the browser having to download the source. To implement this, we simply set the “font-family” property to “serif”, “sans-serif” or “monospace” in the CSS rules, so that any browser will assign the default system font according to the chosen style. If we want to take the nicest possible system font,<\/strong> to ensure good readability<\/strong>, we can set up a font stack like this:
\n<\/code><\/p>\n

   font-family: -apple-system, \r\n                BlinkMacSystemFont, \r\n                \"Segoe UI\", \r\n                Roboto, \r\n                Oxygen-Sans, \r\n                Ubuntu, \r\n                Cantarell, \r\n                \"Helvetica Neue\", \r\n                sans-serif;\r\n<\/pre>\n
The browser will display the first available font in the operating system of this stack<\/strong>. This list may become outdated as operating systems change, but it is not too much of a problem because the most general source will always be used, which should be at the bottom of the stack.<\/p>\n
It is advisable to avoid loading fonts when their use is minimal<\/strong> and also for those cases in which if we do not specify the font for bold or italics,<\/strong> and in the CSS we tell it that we want to see it in any of these formats, the browser itself converts them reasonably well<\/strong>.<\/p>\n
References to fonts or variants of fonts that are not used <\/strong>should also be removed from the CSS <\/strong>. Variants can be: italic, bold, bold normal, italic and bold normal, etc. If the source is not used or is not visible, it will not be downloaded, but it is preferable to shorten the CSS code as much as possible.<\/p>\n
Caching fonts in the browser<\/h3>\n
Don’t forget to cache the fonts in the browser with the cache-control header<\/a>.<\/p>\n
Remove unused subsets of glyphs<\/h3>\n
Glyphs that do not belong to the alphabet used by the web<\/strong> should be removed from the fonts<\/strong>. For example, in the case of a web site in English and Spanish, the glyphs of the Latin alphabet are sufficient, so we do not need Chinese, Japanese, Russian or Arabic characters.<\/p>\n
To do this we will modify the source with asubsetter<\/strong>. With this tool we select the subsets of glyphs<\/strong> we want to use. As an example, here is an online https:\/\/everythingfonts.com\/subsetter<\/a> and a command line https:\/\/github.com\/fonttools\/fonttools<\/a>.<\/p>\n
Once the set of characters that are not going to be used has been eliminated and as a prevention, it is convenient to specify to the browser, in the declaration of the font, that it should not download or apply that font to characters outside the subset chosen<\/strong> with the property“unicode-range<\/strong>“.<\/p>\n
Below is an example of the characters that may appear in Spanish:
\n<\/code><\/p>\n
@font-face {\r\n  font-family: 'fuente';\r\n  src: url('fuente.woff2') format('woff2');\r\n  unicode-range: U+0000-00FF; \r\n}\r\n<\/pre>\n
You can see the list of Unicode ranges<\/strong> here:
\nhttps:\/\/en.wikipedia.org\/wiki\/Unicode_block<\/a><\/p>\n
If we are loading the font from an external Google fonts<\/strong> link, we can specify the chosen subset in the Google URL parameters by adding the following QueryString:
\n<\/code><\/p>\n
subset=cyrillic\r\n<\/pre>\n
However, Google does not always have the exact subset we ask for available and may return a larger font than necessary, so I recommend always downloading and optimizing it manually.
\nThe subset of Latin characters is always loaded by default, so it is not necessary to specify it with subset=latin.<\/p>\n
Use WOFF2 format<\/h3>\n
Of the five existing font formats (WOFF2, WOFF, EOT, TTF and SVG), the WOFF2<\/strong> format , developed by Mozilla, is the most recommended<\/strong>, as it is currently compatible with all modern browsers and does not require additional compression<\/strong>. However, to support older browsers, the font can be added in the other formats<\/strong>.<\/p>\n
EOT, TTF and SVG<\/strong> formats are always best sent compressed<\/strong> from the server (preferably with Brotli q11). The WOFF<\/strong> format only needs compression sometimes<\/strong>, depending on the case and when the optimal compression options have not been used to generate the file.<\/p>\n
To generate a font in different formats we can use online tools such as Font Squirrel<\/a> or www.font-converter.net<\/a>.<\/p>\n
Sets the correct loading order of the different source formats<\/h3>\n
When we want to support older browsers, care must be taken with the order in which fonts are added in the CSS<\/strong>since the browser will use the first compatible file it finds, even if it does not have the best compression.<\/strong> Therefore, the correct order would be WOFF2, WOFF, EOT, TTF and SVG. EOT must come before TTF, since Internet Explorer also supports TTF but only partially:
\n<\/code><\/p>\n
@font-face {\r\n       font-family: 'fuente';\r\n       src: url('fuente.woff2') format('woff2'), \/* todos los navegadores modernos *\/<\/em> \r\n       url('fuente.woff') format('woff'), \/* navegadores que no se han actualizado *\/<\/em>\r\n       url('fuente.eot'), \/* IE9 *\/<\/em>\r\n       url('fuente.eot?#iefix') format('embedded-opentype'), \/* IE9 *\/<\/em>\r\n       url('fuente.ttf')  format('truetype'), \/* Safari, Android, iOS *\/<\/em>\r\n       url('webfont.svg#svgFontName') format('svg'); \/* Safari version <= 4.1  *\/<\/em>\r\n}\r\n<\/pre>\n
If we do not want to support older browsers, only the WOFF2 format is sufficient. After all, if the custom font is not loaded, the system font will be loaded<\/strong>.<\/p>\n
System source display before loading content<\/h3>\n
This avoids the so-called FOIT (Flash of Invisible Text)<\/strong> effect, which means that during page loading, the user cannot see the texts on the website until the font has finished loading. To avoid FOIT, we must use the following CSS statement within the @font-face rule:
\n<\/code><\/p>\n
font-display:swap;\r\n<\/pre>\n
This way the browser will display the system font, while loading the web font<\/strong>, changing the FOIT effect to a FOUT (Flash of Unstyled Text)<\/strong> effect, which consists of the user seeing the font style change all at once. This effect is also not desirable but is preferable<\/strong> to the user not being able to see anything.<\/p>\n
\"FOIT
FOIT and FOUT effects<\/figcaption><\/figure>\n
Very few browsers currently ignore the font-display:swap<\/em> statement, but the alternative is to use additional JavaScript<\/strong> to bypass FOIT, whereby the overhead involved in executing this JavaScript may decrease performance<\/strong>.<\/p>\n
Anyway, in the last point I explain this technique and I recommend to apply it only if tests are performed<\/strong>, to see in each specific case if the performance improves or worsens.<\/p>\n
If we are loading the font from a Google fonts URL<\/strong>, we can apply this CSS declaration by adding the following parameter to the QueryString of the URL:
\n<\/code><\/p>\n
display=swap\r\n<\/pre>\n
Let’s see an example of a Google Fonts URL, passing the parameters to avoid the FOIT effect and selecting the subset of Latin characters<\/strong>:
\n<\/code><\/p>\n
https:\/\/fonts.googleapis.com\/css?family=Cabin:400,700&display=swap&subset=latin<\/strong>\r\n<\/pre>\n
Advanced font optimization techniques<\/h2>\n
Advance loading of fonts used in above the fold (but not too much)<\/h3>\n
We can minimize the FOUT and FOIT effect<\/strong> (in browsers that do not allow the use of “font-display:swap”), bringing forward the loading of critical fonts, i.e. those that are displayed as soon as the page loads. To do this, critical fonts can be included within a <style> tag or by using a link tag with the rel=”preload” and as=”font” properties within the HTML<\/strong>. Examples:
\n<\/code><\/p>\n
<style>\r\n@font-face {\r\n  font-family: 'fuente';\r\n       src: url('fuente.woff2') format('woff2');\r\n}\r\n\/* Aqu\u00ed debe ir el resto del CSS cr\u00edtico para que esta t\u00e9cnica de resultado *\/\r\n<\/style>\r\n<\/pre>\n
 <\/p>\n
Or we put the above code in an external CSS and preload the source from the HTML like this:
\n<\/code><\/p>\n
<link rel=\"preload\" href=\"\/fonts\/fuentes.woff2\" as=\"font\">\r\n<\/pre>\n
 <\/p>\n
This way the dependency tree only has to make one jump<\/strong> to get to the source (HTML \u2192 source), instead of two<\/strong> (HTML \u2192 CSS \u2192 source). However, the label <link> is better if we are sure that the font is always going to be used in the above the fold<\/em>, since including the CSS with the <style>The download does not occur until the browser encounters some CSS rule that applies to the HTML and uses that font.<\/p>\n
Within the critical resources, some are more critical<\/strong> than others, and frontloading the font to minimize FOUT is not as important as loading the above the fold<\/em> styles first. So, overtaking the source too much<\/strong> by including it as a DATA URI (so that the HTML and the source are downloaded at the same time), is considered an anti-pattern, since the source would no longer be cacheable and would delay the loading of the rest of the critical resources<\/strong>. It is also usually not a good idea to preempt your upload with HTTP\/2 server push<\/a>.<\/p>\n
Delay loading of fonts that are not displayed in above the fold<\/h3>\n
Fonts do not start downloading until the browser detects that there is a CSS rule that uses that font. But if they are fonts that are only used below the fold <\/em><\/strong>(for example, an exclusive font for the footer), they will be downloaded and may interfere with the download of critical resources, so I recommend to start downloading them in a deferred way<\/strong>. For that they can be loaded from a CSS containing all the non-critical styles whose delayed loading can be implemented like this:
\n<\/code><\/p>\n
    <noscript id=\"deferred-styles\">\r\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"\/bundle-css-no-critico-v452372.css\"\/>\r\n    <\/noscript<\r\n    <script defer src=\"bundle-js-v23423.js\"><\/script>\r\n<\/pre>\n
Inside the JavaScript we will have the following lines, which will be executed after loading the entire page (due to the defer attribute) and once the browser is ready to perform a screen refresh:
\n<\/code><\/p>\n
      var loadDeferredStyles = function() {\r\n        var addStylesNode = document.getElementById(\"deferred-styles\");\r\n        var replacement = document.createElement(\"div\");\r\n        replacement.innerHTML = addStylesNode.textContent;\r\n        document.body.appendChild(replacement)\r\n        addStylesNode.parentElement.removeChild(addStylesNode);\r\n      };\r\n      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||\r\n          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\r\n      if (raf){ \r\n         raf(function() { window.setTimeout(loadDeferredStyles, 0); });\r\n      }\r\n      else{ \r\n         window.addEventListener('load', loadDeferredStyles);\r\n      }\r\n<\/pre>\n
 <\/p>\n
Avoiding FOIT and multiple repaints with JavaScript<\/h3>\n
\"TypeEach time a font is loaded, the browser performs a repaint with the new font <\/strong>. If there are several fonts, this repainting may occur several times. If this is our case, I recommend using the FontFaceOBserver JavaScript<\/strong> library that you can download here<\/a> and that uses the JavaScript Font Loading API<\/strong> in those browsers that support it.<\/p>\n
This library allows us to implement multiple font loading strategies, but most importantly, it allows us to force and observe the loading of existing fonts in the CSS and associate code when a set of fonts have finished loading<\/strong>.<\/p>\n
This way we can load the fonts without the need for an associated CSS rule and, once loaded, change a class in the HTML that makes them all show at once.<\/p>\n
Example:<\/p>\n
CSS code:
\n<\/code><\/p>\n
@font-face {\r\n  font-family: 'Mi fuente';\r\n  src: url(mi-fuente.woff2) format('woff2'),\r\n       url(mi-fuente.woff) format('woff');\r\n  unicode-range: U+0000-00FF;\r\n  \/* podemos especificar font-display:swap; para que las herramientas de WPO de Google nos puntuen mejor, pero no servir\u00e1 de nada ya que lo vamos a implementar con JavaScript *\/\r\n}\r\n@font-face {\r\n  font-family: 'Mi fuente';\r\n  src: url(mi-fuente-italica.woff2) format('woff2'),\r\n       url(mi-fuente-italica.woff) format('woff');\r\n  font-style: italic;\r\n  unicode-range: U+0000-00FF;\r\n}\r\n\r\n\/* Fuente del sistema que se usar\u00e1 mientras se carga la p\u00e1gina *\/\r\nhtml{\r\n   font-family: -apple-system, \r\n                BlinkMacSystemFont, \r\n                \"Segoe UI\", \r\n                Roboto, \r\n                Oxygen-Sans, \r\n                Ubuntu, \r\n                Cantarell, \r\n                \"Helvetica Neue\", \r\n                sans-serif;\r\n}\r\n\r\n\/* Fuente que se usa cuando ya est\u00e1 cargada la fuente *\/\r\nhtml.fonts-loaded{\r\n   font-family: 'Mi fuente';\r\n}\r\n\r\nhtml.fonts-loaded em{\r\n   font-style: italic;\r\n}\r\n<\/pre>\n
 <\/p>\n
JavaScript code:
\n<\/code><\/p>\n
var normal = new FontFaceObserver('Mi fuente');\r\nvar italic = new FontFaceObserver('Mi fuente', {\r\n  style: 'italic'\r\n});\r\nvar html = document.documentElement;\r\n\r\n\/\/console.log('cargando fuentes');\r\nif (sessionStorage.fontsLoaded) {\r\n    document.documentElement.classList.add('fonts-loaded')\r\n} \r\nelse {\r\n  Promise.all([\r\n  normal.load(),\r\n  italic.load()\r\n  ]).then(function () {\r\n    \/\/console.log('fuentes cargadas');\r\n    html.classList.add('fonts-loaded');\r\n    sessionStorage.fontsLoaded = true;\r\n  }).catch(function () {\r\n    \/\/console.log('fallo cargando fuentes');\r\n    sessionStorage.fontsLoaded = false;\r\n  });\r\n}\r\n<\/pre>\n
In the example we save a variable in the sessionStorage object that serves as a hint, to know if the sources are most likely to be in the cache and thus load them directly, without the need to download them again.<\/p>\n
Conclusion<\/h2>\n
The more fonts we have, the less efficient the loading and the more complex the optimization<\/strong>. Not using fonts or using at most one font is the best strategy to save development costs and improve performance, at the cost of sacrificing something in the design that sometimes may not be very relevant.<\/p>\n
Illustration by Willi Heidelbach, CC BY 2.5<\/a>, Link<\/a><\/p>\n\n
\n
\n
Tu marca, visible y encontrable<\/p>\n\n\n\n
Est\u00e1s a un paso de dominar tu categor\u00eda online<\/p>\n\n\n\nStart now<\/a>\n<\/div>\n\n\n\n\"\"\n<\/section>\n\n","protected":false},"excerpt":{"rendered":"
If you want to squeeze the #WPO out of your #web to the max, learn how to optimize your fonts. In this post…<\/p>\n","protected":false},"author":14,"featured_media":47778,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[349],"tags":[534,379],"class_list":["post-52099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-technical-seo","tag-wpo"],"acf":[],"yoast_head":"\nHow to optimize the fonts of a website? | Human Level<\/title>\n<meta name=\"description\" content=\"The more sources we have on a website, the worse the WPO metrics are. Find out how to optimize them here.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to optimize the fonts of a website? | Human Level\" \/>\n<meta property=\"og:description\" content=\"The more sources we have on a website, the worse the WPO metrics are. Find out how to optimize them here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website\" \/>\n<meta property=\"og:site_name\" content=\"Human Level\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-19T09:22:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-30T07:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-de-fuentes-e1569939469634.png\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ram\u00f3n Saquete\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daiatron\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ram\u00f3n Saquete\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website\"},\"author\":{\"name\":\"Ram\u00f3n Saquete\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#\\\/schema\\\/person\\\/11ad888926867985985a0210476bae94\"},\"headline\":\"How to optimize the fonts of a website?\",\"datePublished\":\"2019-09-19T09:22:40+00:00\",\"dateModified\":\"2021-05-30T07:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website\"},\"wordCount\":1873,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/optimizacion-de-fuentes-e1569939469634.png\",\"keywords\":[\"Technical SEO\",\"WPO\"],\"articleSection\":[\"SEO\\\/GEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website\",\"url\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website\",\"name\":\"How to optimize the fonts of a website? | Human Level\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/optimizacion-de-fuentes-e1569939469634.png\",\"datePublished\":\"2019-09-19T09:22:40+00:00\",\"dateModified\":\"2021-05-30T07:00:00+00:00\",\"description\":\"The more sources we have on a website, the worse the WPO metrics are. Find out how to optimize them here.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#primaryimage\",\"url\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/optimizacion-de-fuentes-e1569939469634.png\",\"contentUrl\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/optimizacion-de-fuentes-e1569939469634.png\",\"width\":400,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\\\/how-to-optimize-the-fonts-of-a-website#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/www.humanlevel.com\\\/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"SEO\\\/GEO\",\"item\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/blog\\\/seo\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to optimize the fonts of a website?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#website\",\"url\":\"https:\\\/\\\/www.humanlevel.com\\\/en\",\"name\":\"Human Level\",\"description\":\"Web positioning and online marketing consultant Human Level\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.humanlevel.com\\\/en?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#organization\",\"name\":\"Human Level\",\"url\":\"https:\\\/\\\/www.humanlevel.com\\\/en\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/logohl25x3.png\",\"contentUrl\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/logohl25x3.png\",\"width\":600,\"height\":93,\"caption\":\"Human Level\"},\"image\":{\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/company\\\/human-level-communications\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/humanlevelcommunica\",\"https:\\\/\\\/bsky.app\\\/profile\\\/humanlevel.bsky.social\",\"https:\\\/\\\/instagram.com\\\/humanlevel\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/en#\\\/schema\\\/person\\\/11ad888926867985985a0210476bae94\",\"name\":\"Ram\u00f3n Saquete\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/1x1-ramon-saquete-26-96x96.jpg\",\"url\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/1x1-ramon-saquete-26-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.humanlevel.com\\\/wp-content\\\/uploads\\\/1x1-ramon-saquete-26-96x96.jpg\",\"caption\":\"Ram\u00f3n Saquete\"},\"description\":\"Web Developer and Technical SEO Consultant at Human Level. He holds degrees in Computer Engineering and Technical Engineering in Computer Systems. He also earned a Higher Vocational Degree in Computer Applications Development and later obtained the Certificate of Pedagogical Aptitude (CAP). He is an expert in WPO and indexability.\",\"sameAs\":[\"https:\\\/\\\/es.linkedin.com\\\/in\\\/ramonsaquete\",\"https:\\\/\\\/x.com\\\/daiatron\"],\"url\":\"https:\\\/\\\/www.humanlevel.com\\\/en\\\/author\\\/ramon\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to optimize the fonts of a website? | Human Level","description":"The more sources we have on a website, the worse the WPO metrics are. Find out how to optimize them here.","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:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website","og_locale":"en_US","og_type":"article","og_title":"How to optimize the fonts of a website? | Human Level","og_description":"The more sources we have on a website, the worse the WPO metrics are. Find out how to optimize them here.","og_url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website","og_site_name":"Human Level","article_published_time":"2019-09-19T09:22:40+00:00","article_modified_time":"2021-05-30T07:00:00+00:00","og_image":[{"width":400,"height":400,"url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-de-fuentes-e1569939469634.png","type":"image\/png"}],"author":"Ram\u00f3n Saquete","twitter_card":"summary_large_image","twitter_creator":"@daiatron","twitter_misc":{"Written by":"Ram\u00f3n Saquete","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#article","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website"},"author":{"name":"Ram\u00f3n Saquete","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94"},"headline":"How to optimize the fonts of a website?","datePublished":"2019-09-19T09:22:40+00:00","dateModified":"2021-05-30T07:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website"},"wordCount":1873,"commentCount":0,"publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-de-fuentes-e1569939469634.png","keywords":["Technical SEO","WPO"],"articleSection":["SEO\/GEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website","url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website","name":"How to optimize the fonts of a website? | Human Level","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en#website"},"primaryImageOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#primaryimage"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-de-fuentes-e1569939469634.png","datePublished":"2019-09-19T09:22:40+00:00","dateModified":"2021-05-30T07:00:00+00:00","description":"The more sources we have on a website, the worse the WPO metrics are. Find out how to optimize them here.","breadcrumb":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#primaryimage","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-de-fuentes-e1569939469634.png","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-de-fuentes-e1569939469634.png","width":400,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/www.humanlevel.com\/en"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.humanlevel.com\/en\/blog"},{"@type":"ListItem","position":3,"name":"SEO\/GEO","item":"https:\/\/www.humanlevel.com\/en\/blog\/seo"},{"@type":"ListItem","position":4,"name":"How to optimize the fonts of a website?"}]},{"@type":"WebSite","@id":"https:\/\/www.humanlevel.com\/en#website","url":"https:\/\/www.humanlevel.com\/en","name":"Human Level","description":"Web positioning and online marketing consultant Human Level","publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.humanlevel.com\/en?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.humanlevel.com\/en#organization","name":"Human Level","url":"https:\/\/www.humanlevel.com\/en","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logohl25x3.png","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logohl25x3.png","width":600,"height":93,"caption":"Human Level"},"image":{"@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/human-level-communications","https:\/\/www.youtube.com\/user\/humanlevelcommunica","https:\/\/bsky.app\/profile\/humanlevel.bsky.social","https:\/\/instagram.com\/humanlevel"]},{"@type":"Person","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94","name":"Ram\u00f3n Saquete","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/1x1-ramon-saquete-26-96x96.jpg","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/1x1-ramon-saquete-26-96x96.jpg","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/1x1-ramon-saquete-26-96x96.jpg","caption":"Ram\u00f3n Saquete"},"description":"Web Developer and Technical SEO Consultant at Human Level. He holds degrees in Computer Engineering and Technical Engineering in Computer Systems. He also earned a Higher Vocational Degree in Computer Applications Development and later obtained the Certificate of Pedagogical Aptitude (CAP). He is an expert in WPO and indexability.","sameAs":["https:\/\/es.linkedin.com\/in\/ramonsaquete","https:\/\/x.com\/daiatron"],"url":"https:\/\/www.humanlevel.com\/en\/author\/ramon"}]}},"_links":{"self":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/comments?post=52099"}],"version-history":[{"count":5,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52099\/revisions"}],"predecessor-version":[{"id":54817,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52099\/revisions\/54817"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media\/47778"}],"wp:attachment":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media?parent=52099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/categories?post=52099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/tags?post=52099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}