{"id":58000,"date":"2024-11-25T07:00:00","date_gmt":"2024-11-25T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=58000"},"modified":"2026-03-11T08:36:18","modified_gmt":"2026-03-11T15:36:18","slug":"optimize-web-fonts","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/","title":{"rendered":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"},"content":{"rendered":"\n<p>Web fonts bring personality to your site, but they also add weight.<\/p>\n\n\n\n<p>And if your fonts take too long to load, users are left staring at a blank screen. Even worse, your site might look unstable as text shifts unexpectedly.<\/p>\n\n\n\n<p>This also hurts <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">Core Web Vitals<\/a> \u2014 the metrics that directly affect your search ranking and user experience.<\/p>\n\n\n\n<p>Here, every millisecond matters.<\/p>\n\n\n\n<p>So, how can you keep your choice of web fonts without sacrificing performance?<\/p>\n\n\n\n<p>Let\u2019s break it down, one step at a time.<\/p>\n\n\n\n<p>But first, what exactly are web safe fonts and web fonts?<\/p>\n\n\n\n<div class=\"liftoff-cta-card\">\n\t<div class=\"line\">\n\t\t<svg width=\"834\" height=\"469\" viewBox=\"0 0 834 469\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path opacity=\"0.7\" d=\"M865.739 -59.8017C865.739 -59.8017 832.792 123.045 744.31 182.376C655.829 241.707 562.417 143.097 474.164 202.767C386.505 262.036 442.275 384.659 354.504 443.76C266.434 503.061 98.0198 364.278 4.7754 318.308\" stroke=\"url(#paint0_linear_8_19)\" stroke-opacity=\"0.25\" stroke-width=\"19.8\"\/>\n<defs>\n<linearGradient id=\"paint0_linear_8_19\" x1=\"918.374\" y1=\"-112.088\" x2=\"147.486\" y2=\"548.265\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.0576923\"\/>\n<stop offset=\"0.350962\" stop-color=\"#0073EC\"\/>\n<stop offset=\"0.825067\" stop-color=\"#C265FE\"\/>\n<stop offset=\"1\"\/>\n<\/linearGradient>\n<\/defs>\n<\/svg>\n\n\t<\/div>\n\t<div class=\"liftoff-cta-card__content\">\n\t\t<div class=\"headline_1\">\n\t\t\t\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\n<path d=\"M24.0006 16.0019C19.5835 16.0019 16.0015 19.5839 16.0015 24.001V32.0001H32.003V15.9985H24.0039L24.0006 16.0019Z\" fill=\"url(#paint0_linear_3747_604)\"\/>\n<path d=\"M16.0015 7.99911V0H0V16.0016H7.99906C12.4162 16.0016 15.9981 12.4196 15.9981 8.00247L16.0015 7.99911Z\" fill=\"url(#paint1_linear_3747_604)\"\/>\n<path d=\"M7.99902 16.002C12.4168 16.002 15.998 19.5832 15.998 24.001C15.9979 28.4186 12.4167 32 7.99902 32C3.58137 32 0.000149208 28.4186 0 24.001C0 19.5832 3.58128 16.002 7.99902 16.002ZM24.001 0C28.4185 0.000241972 32 3.58143 32 7.99902C32 12.4167 28.4185 15.9978 24.001 15.998C19.5832 15.998 16.002 12.4168 16.002 7.99902C16.002 3.58128 19.5832 0 24.001 0Z\" fill=\"url(#paint2_linear_3747_604)\"\/>\n<rect x=\"8\" y=\"8\" width=\"16\" height=\"16\" fill=\"#FFFFFF\"\/>\n<path d=\"M16.0015 7.99902H24.0006V15.9981C19.5835 15.9981 16.0015 12.4128 16.0015 7.99902Z\" fill=\"#18181B\"\/>\n<path d=\"M7.99908 16.0015L7.99908 8.00235H15.9981C15.9981 12.4195 12.4128 16.0015 7.99908 16.0015Z\" fill=\"#18181B\"\/>\n<path d=\"M16.0015 24.0005H8.00246V16.0014C12.4196 16.0014 16.0015 19.5867 16.0015 24.0005Z\" fill=\"#18181B\"\/>\n<path d=\"M24.0007 16.0015V24.0006H16.0016C16.0016 19.5835 19.5869 16.0015 24.0007 16.0015Z\" fill=\"#18181B\"\/>\n<defs>\n<linearGradient id=\"paint0_linear_3747_604\" x1=\"16.0001\" y1=\"16.0002\" x2=\"32.0001\" y2=\"32.0002\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#A1A1AA\"\/>\n<stop offset=\"1\" stop-color=\"#C7C7CD\"\/>\n<\/linearGradient>\n<linearGradient id=\"paint1_linear_3747_604\" x1=\"0\" y1=\"0\" x2=\"16\" y2=\"16\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.251049\" stop-color=\"#C7C7CD\"\/>\n<stop offset=\"1\" stop-color=\"#A1A1AA\"\/>\n<\/linearGradient>\n<linearGradient id=\"paint2_linear_3747_604\" x1=\"-11.3782\" y1=\"44.9411\" x2=\"-8.40086\" y2=\"-18.7449\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#BE59FF\"\/>\n<stop offset=\"0.19\" stop-color=\"#9D60FF\"\/>\n<stop offset=\"0.74\" stop-color=\"#4274FF\"\/>\n<stop offset=\"1\" stop-color=\"#1F7CFF\"\/>\n<\/linearGradient>\n<\/defs>\n<\/svg>\n\n\t\t\tMeet Remixer\n\t\t<\/div>\n\t\t<div class=\"headline_2\">You describe it. Remixer builds it.<\/div>\n\t\t<p>The AI website builder that turns conversation into designer-level sites. Free with hosting.<\/p>\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/remixer-website-builder\/\"\n                        class=\"btn btn--brand\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Start Free Trial                    <\/a>\n\n\t<\/div>\n\t<div class=\"tr-img-wrap-outer\"><img decoding=\"async\" data-skip-lazy class=\"\" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2026\/03\/remixer-screen.webp\" alt=\"DreamHost Remixer AI website builder\" \/><\/div>\n<\/div>\n\n\n<h2 id=\"h-what-are-web-safe-fonts\" class=\"wp-block-heading\">What Are Web Safe Fonts?<\/h2>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" rel=\"noopener\">Web safe fonts<\/a> are the tried-and-true options that work everywhere. They\u2019re fonts most devices already have, which means you can count on them to load quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"877\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp\" alt=\"Diagram explaining what website fonts; showing a server connecting to a browser and vice versa, and browser to the user's computer and fonts back to the browser\" class=\"wp-image-58001 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-300x164.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1024x561.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-768x421.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1536x842.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-600x329.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1200x658.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-730x400.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1460x800.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-784x430.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1568x859.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-877x481.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/877;\" \/><\/figure>\n\n\n\n<p>Here are the web safe fonts you can use:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arial<\/li>\n\n\n\n<li>Times New Roman<\/li>\n\n\n\n<li>Verdana<\/li>\n\n\n\n<li>Trebuchet MS<\/li>\n\n\n\n<li>Courier<\/li>\n\n\n\n<li>Impact<\/li>\n\n\n\n<li>Georgia<\/li>\n\n\n\n<li>Comic Sans MS<\/li>\n<\/ul>\n\n\n\n<p>Even with limited choices, a skilled designer can use these fonts creatively.<\/p>\n\n\n\n<p>But, websafe fonts are often overused and give your website a \u201c<em>similar<\/em>\u201d feel \u2014 even when you\u2019ve put a lot of effort and money in designing the website.<\/p>\n\n\n\n<p>So how do you make it look prettier?<\/p>\n\n\n\n<p>With web fonts.<\/p>\n\n\n\n<h2 id=\"h2_what-are-web-fonts\" class=\"wp-block-heading\">What Are Web Fonts?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"885\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp\" alt=\"example of different Google fonts showing the example using the sentence &quot;Everyone ha the right to free of thought&quot; in three different font types\" class=\"wp-image-58002 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-300x166.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1024x566.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-768x425.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1536x850.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-600x332.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1200x664.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-730x404.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1460x808.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-784x434.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1568x867.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-877x485.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/885;\" \/><\/figure>\n\n\n\n<p>Web fonts let you move away from the often overused websafe fonts.<\/p>\n\n\n\n<p>Instead of relying on fonts available on a user\u2019s device, web fonts can be downloaded from an external source like <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/\" rel=\"noopener\">Google Fonts<\/a> or directly from your server onto your user\u2019s device <em>(temporarily).<\/em><\/p>\n\n\n\n<p>This allows you to use any custom font that matches your brand or design needs.<\/p>\n\n\n\n<p>We have also curated the <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/best-google-fonts\/\" rel=\"noopener\">best Google fonts<\/a> to help you get started.<\/p>\n\n\n\n<p>When a user visits your site, the web font is temporarily downloaded and applied to the text using the <strong><code>@font-face<\/code><\/strong> rule in CSS.<\/p>\n\n\n\n<p>Web fonts then begin to behave like local fonts \u2014 They auto-adjust to the screen sizes while keeping your website looking sharp.<\/p>\n\n\n\n<p>Fonts have also evolved over time to have more efficient storage formats. Similar <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" rel=\"noopener\">image formats<\/a>, fonts have TTF, WOFF, WOFF2, and EOT.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Embedded OpenType (EOT):<\/strong> Compatible with older versions of Internet Explorer (below IE9). Not compressed by default, but GZIP compression can be applied.<\/li>\n\n\n\n<li><strong>TrueType (TTF):<\/strong> Supported by older Android browsers (below version 4.4). It\u2019s uncompressed by default but can be GZIP-compressed.<\/li>\n\n\n\n<li><strong>Web Open Font Format (WOFF):<\/strong> Supported by most modern browsers and includes built-in compression.<\/li>\n\n\n\n<li><strong>Web Open Font Format 2 (WOFF2):<\/strong> Compatible with browsers that support it, featuring custom compression algorithms that reduce file size by around 30% compared to other formats.<\/li>\n<\/ul>\n\n\n\n<p>The modern formats offer compression for better performance and help keep your site\u2019s design both functional and visually distinct.<\/p>\n\n\n\n<h2 id=\"h2_what-are-core-web-vitals-cwv-metrics\" class=\"wp-block-heading\">What Are Core Web Vitals (CWV) Metrics?<\/h2>\n\n\n\n<p>Here\u2019s the thing: Google wants all of its users to have an excellent experience.<\/p>\n\n\n\n<p>Whichever website or app gives Google\u2019s users the best experience will get more \u201clove\u201d from Google\u2019s algorithms.<\/p>\n\n\n\n<p>And how\u2019s this \u201c<strong><em>experience<\/em><\/strong><em>\u201d<\/em> measured?<\/p>\n\n\n\n<p>Google launched Core Web Vitals <a target=\"_blank\" href=\"https:\/\/web.dev\/articles\/vitals#core-web-vitals\" rel=\"noopener\">in early 2020<\/a> for just that purpose.<\/p>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">CWV<\/a> is a set of three metrics that tell Google how your website or app performs for the users they send there.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1468\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp\" alt=\"LCP vs INP vs CLS showing different measurements on a scale from Good-Needs Improvement-Bad\" class=\"wp-image-58003 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-300x275.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1024x940.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-768x705.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1536x1409.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-600x551.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1200x1101.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-730x670.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1460x1340.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-784x719.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1568x1439.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-877x805.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1468;\" \/><\/figure>\n\n\n\n<p>Higher scores on these metrics can help you rank higher on Google. Let\u2019s quickly go over these metrics.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Largest Contentful Paint (LCP)<\/h3>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/largest-contentful-paint\/\" rel=\"noopener\"><strong>LCP<\/strong><\/a><strong> measures how long it takes for the largest visible element on your page to load.<\/strong><\/p>\n\n\n\n<p>This is generally an image or video but could be a large block of text or an embedded video.<\/p>\n\n\n\n<p>The faster this happens, the better your site performs in the eyes of both users and search engines.<\/p>\n\n\n\n<p>A good LCP score means users aren\u2019t left waiting for your main content to appear.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interaction-to-next-paint-inp\">Interaction to Next Paint (INP)<\/h3>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/inp-interaction-to-next-paint\/\" rel=\"noopener\"><strong>INP<\/strong><\/a><strong> measures the time between a user\u2019s interaction (like clicking or tapping) and when the page responds visually.<\/strong><\/p>\n\n\n\n<p>It gives a more accurate picture of interactivity than FID, as it considers the full user journey rather than just the first interaction.<\/p>\n\n\n\n<p>A low INP score means your site feels responsive, improving user engagement and satisfaction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cumulative Layout Shift (CLS)<\/h3>\n\n\n\n<p><strong>CLS measures how stable your page is while loading.<\/strong><\/p>\n\n\n\n<p>When elements move around unexpectedly, it frustrates users and makes the page feel unreliable.<\/p>\n\n\n\n<p>A low CLS score means your page loads smoothly, without layout shifts that disrupt the user experience.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\" class=\"wp-block-heading\">How To Optimize Web Fonts for Better Core Web Vitals<\/h2>\n\n\n\n<p>So, what\u2019s all the fuss about web font performance?<\/p>\n\n\n\n<p>Why can\u2019t we just add web fonts and call it a day? Well, you can.<\/p>\n\n\n\n<p>But as we&#8217;ve talked about before, web fonts aren\u2019t local. They are fetched from a server, downloaded, and applied to your site, and that\u2019s where the problem lies.<\/p>\n\n\n\n<p><strong>It takes time.<\/strong><\/p>\n\n\n\n<p>And if it takes too long, it affects your Core Web Vitals and <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/increase-website-conversion-rate\/\" rel=\"noopener\">website conversion rate.<\/a><\/p>\n\n\n\n<p>Let\u2019s look at some ways to optimize web fonts for better core web vitals.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Preloading Fonts<\/h3>\n\n\n\n<p>You want your fonts to be ready the moment the page starts loading.<\/p>\n\n\n\n<p>So when the page is ready for the user, so is the font.<\/p>\n\n\n\n<p>That\u2019s called <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\" rel=\"noopener\"><strong>preloading<\/strong><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"627\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp\" alt=\"Preloading times in a horizontal bar graph: index.html spans from 0ms-280ms, main.css from 50ms to 380 ms and so on\" class=\"wp-image-58004 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-300x184.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-768x470.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1536x940.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-600x367.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1200x734.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-730x447.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1460x893.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-784x480.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1568x959.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-877x537.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/627;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.bramstein.com\/writing\/preload-hints-for-web-fonts.html\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Preloading tells the browser, \u201c<em>Hey, this font is important. Please load it right away.\u201d<\/em><\/p>\n\n\n\n<p>Let\u2019s say you\u2019re using the popular <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" rel=\"noopener\">Google font, Roboto<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"814\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp\" alt=\"screenshot of Google Fonts example using Roboto with text in Roboto font &quot;Whereas disregard and contempt for human rights have resulted&quot; \" class=\"wp-image-58005 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-300x153.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1024x521.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-768x391.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1536x781.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-600x305.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1200x611.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-730x371.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1460x743.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-784x399.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1568x798.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-877x446.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/814;\" \/><\/figure>\n\n\n\n<p>You need to add a single attribute to your HTML code to preload the font: <strong><code>rel = \u201cpreload\u201d<\/code><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;<\/code><\/pre>\n\n\n\n<p>After this, the browser knows to prioritize downloading Roboto, so your text appears styled with the right font faster.<\/p>\n\n\n\n<p>This reduces the time it takes for the largest text block (LCP) to render, so users see the final version of your site sooner.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Control Font Load Behavior With the Font-Display Property<\/h3>\n\n\n\n<p>However, preloading could increase the initial load time by a little since the fonts are given priority.<\/p>\n\n\n\n<p>The <strong><code>font-display property<\/code><\/strong> lets you control how your text behaves while custom fonts are still loading.<\/p>\n\n\n\n<p>This can help you avoid the dreaded <strong>Flash of Invisible Text (FOIT),<\/strong> where users see blank spaces, and the <strong>Flash of Unstyled Text (FOUT),<\/strong> where the page appears with fallback fonts for a second and immediately switches to custom fonts.<\/p>\n\n\n\n<p>The <code>font-display property<\/code> has four ways to manage text behavior: block, swap, fallback, and optional.<\/p>\n\n\n\n<p>Let\u2019s look at the two that you\u2019d need.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1243\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp\" alt=\"plotted line charts shwoing the impact of font display values on page load between block, swap, fallback, and optional\" class=\"wp-image-58006 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-300x233.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1024x796.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-768x597.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1536x1193.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-600x466.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1200x932.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-730x567.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1460x1134.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-784x609.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1568x1218.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-877x681.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1243;\" \/><\/figure>\n\n\n\n<p><strong><code>font-display: swap<\/code><\/strong> \u2014 This option is the safest bet for most sites. It ensures text appears immediately with a fallback font and swaps to the custom font once it is ready.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: swap;\n}<\/code><\/pre>\n\n\n\n<p>Here, the fallback font (like Arial or another system font) will load instantly, keeping the page readable.<\/p>\n\n\n\n<p>When Roboto is downloaded, it replaces the fallback font without leaving a blank space on the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"624\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp\" alt=\"screenshot &quot;font-display:swap&quot; with text: this is a paragraph. This is heavier text (in bold). This is emphasized text (in italics). This is heavier and emphasized text (in italics and bold). \" class=\"wp-image-58007 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-300x117.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1024x399.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-768x300.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1536x599.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-600x234.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1200x468.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-730x285.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1460x569.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-784x306.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1568x612.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-877x342.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/624;\" \/><\/figure>\n\n\n\n<p>Here\u2019s a <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display.html\" rel=\"noopener\">demo of what font-display swap<\/a> behaves like in the real world.<\/p>\n\n\n\n<p><strong><code>font-display: optional<\/code><\/strong> \u2014 If you\u2019re concerned about speed, this tells the browser to skip the custom font if it doesn\u2019t load fast enough. This works when you don\u2019t mind if the fallback stays in place.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: optional;\n}<\/code><\/pre>\n\n\n\n<p>This option makes sense when performance is more critical than design, making it perfect for a site that\u2019s all about speed.<\/p>\n\n\n\n<p>Here\u2019s <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display-optional.html\" rel=\"noopener\">an example<\/a> of what this looks like in the real world. You won\u2019t notice the switch here since most fonts load quickly enough.<\/p>\n\n\n\n<p>However, the optional argument is great in case your font server goes down or slow.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Subsetting Fonts<\/h3>\n\n\n\n<p>Most fonts come with hundreds, even thousands, of characters.<\/p>\n\n\n\n<p>Chances are, you only need a small portion of those. Removing those is called font subsetting.<\/p>\n\n\n\n<p>That\u2019s right, you can remove unnecessary characters to reduce the size of the font file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp\" alt=\"an abstract illustration showing font subsetting, where the letter &quot;a&quot; is being extracted and separated from a larger font file\" class=\"wp-image-58008 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-300x150.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1024x512.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-768x384.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1536x768.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-600x300.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1200x600.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-730x365.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1460x730.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-784x392.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1568x784.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-877x439.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n\n<p>Suppose your site only needs English characters.<\/p>\n\n\n\n<p>A tool like <a target=\"_blank\" href=\"https:\/\/github.com\/fonttools\/fonttools\" rel=\"noopener\">FontTools<\/a> can help you subset your font to only include the characters you\u2019ll actually use.<\/p>\n\n\n\n<p>This means all Unicode characters that aren\u2019t necessary in the English language can be removed to save the file size.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Unicode<\/h3>\n    <p>The Unicode Standard is an international encoding system. It assigns a unique number to every character in every language so the character can be displayed across devices, platforms, and languages.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/unicode\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<p>This reduces the file size from, say, 80 KB to 30 KB.<\/p>\n\n\n\n<p>Smaller files mean faster downloads, improving both LCP and CLS since the font loads quickly and doesn\u2019t shift the layout.<\/p>\n\n\n\n<p>Here\u2019s an example of how you\u2019d remove everything other than English characters using FontTools:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F<\/code><\/pre>\n\n\n\n<p>Now, your Roboto font only contains the basic Latin characters needed for English text, making it much faster to load.<\/p>\n\n\n\n<p>If you prefer a GUI-based approach, you can also <a target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"noopener\">try font-squirrel<\/a>. Once you upload a font file, you get quite a lot of customization options to add or remove<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1112\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp\" alt=\"A web interface for Font Squirrel's Webfont Generator showing font conversion options and format settings.\" class=\"wp-image-58009 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-300x209.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1024x712.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-768x534.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1536x1068.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-600x417.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1200x834.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-730x507.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1460x1015.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-784x545.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1568x1090.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-877x610.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1112;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Compressing Fonts<\/h3>\n\n\n\n<p>Modern font formats like WOFF2 offer compression that can reduce font size by up to 30% compared to older formats like TTF.<\/p>\n\n\n\n<p>Using the most compressed version of your font can significantly reduce its impact on page load time.<\/p>\n\n\n\n<p>For instance, here\u2019s how you can ensure you\u2019re using WOFF2:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2'),\n       url('roboto.woff') format('woff');\n  font-weight: 400;\n}<\/code><\/pre>\n\n\n\n<p>This way, browsers that support WOFF2 will use it by default, reducing load times while still displaying a crisp, high-quality font.<\/p>\n\n\n\n<p>However, if a browser can\u2019t use WOFF2, it defaults to WOFF.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Base64 Encoding<\/h3>\n\n\n\n<p>This is another commonly used practice to optimize your web fonts.<\/p>\n\n\n\n<p>However, you need to be cautious about when to use Base64-encoded fonts.<\/p>\n\n\n\n<p><strong>Base64 encoding is most useful for small fonts or icons.<\/strong><\/p>\n\n\n\n<p>If it gets overused though, you can bloat the CSS, increasing the page load time more than just using the font itself.<\/p>\n\n\n\n<p>If you want to use Base64 encoding for an icon font, you\u2019d first convert the font file to Base64 format. Here\u2019s how it might look:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'CustomIcons';\n  src: url('data:font\/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n\n<p>This method works well for small icon fonts you use frequently throughout the site.<\/p>\n\n\n\n<p>The CSS file loads with the embedded font, eliminating an extra HTTP request.<\/p>\n\n\n\n<p>However, avoid this for large body fonts, as it can slow down initial page rendering.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-lt-link-gt-vs-css-import-for-fonts\">6. <code>&lt;link&gt;<\/code> vs. CSS <code>@import<\/code> for Fonts<\/h3>\n\n\n\n<p><code>&lt;link&gt;<\/code> and <code>@import<\/code> have a significant difference in load performance.<\/p>\n\n\n\n<p>The <code>&lt;link&gt;<\/code> tag loads fonts asynchronously, meaning it doesn\u2019t hold up the rest of your page from rendering, while <code>@import<\/code> is a bit slower.<\/p>\n\n\n\n<p><strong>Use <code>&lt;link&gt;<\/code> whenever possible.<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cFor 90%+ of the cases you likely want the <code>&lt;link&gt;<\/code> tag. As a rule of thumb, you want to avoid <code>@import<\/code> rules because they defer the loading of the included resource until the file is fetched.\u201d <\/em><a href=\"https:\/\/stackoverflow.com\/questions\/12316501\/including-google-fonts-link-or-import\" target=\"_blank\" rel=\"noopener\"><em>Ilya Grigorik<\/em><\/a><em>, Engineer and Technical Advisor to the CEO at Shopify<\/em><\/p>\n<\/blockquote>\n\n\n\n<p>It loads fonts independently, allowing the rest of the page to load without waiting on the font file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href= \"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\"&gt;<\/code><\/pre>\n\n\n\n<p>This is the preferred method for loading Google Fonts or similar external font services.<\/p>\n\n\n\n<p>Placed in the <code>&lt;head&gt;<\/code> section of your HTML, it ensures the font starts loading early without blocking other resources.<\/p>\n\n\n\n<p><strong>Avoid <code>@import<\/code> for critical fonts.<\/strong><\/p>\n\n\n\n<p><code>@import<\/code> waits until the CSS file is fully loaded, which can increase load time and hurt LCP.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap');<\/code><\/pre>\n\n\n\n<p>Using <code>@import<\/code> for fonts only works for secondary or less critical fonts. As a practice, avoid it for anything on the first screen of content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Reduce Visual Shifts\/CLS With Font Matching and Size Adjust<\/h3>\n\n\n\n<p>Visual shifts \u2014 or cumulative layout shifts (CLS), as Google calls them\u2014 occur when the layout changes unexpectedly, often due to font swaps.<\/p>\n\n\n\n<p>To minimize this effect, choose fallback fonts that closely resemble your custom font\u2019s style and dimensions.<\/p>\n\n\n\n<p>The <strong><code>CSS size-adjust<\/code><\/strong> property also lets you control the fallback font size, reducing visual shifts when the custom font loads.<\/p>\n\n\n\n<p>If your custom font is Roboto and a fallback font, adjust its size to match Roboto, making the transition almost seamless.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2');\n  font-display: swap;\n  size-adjust: 100%;\n}<\/code><\/pre>\n\n\n\n<p>Here, Roboto\u2019s fallback (e.g., Arial) maintains consistent size, reducing any noticeable movement when Roboto fully loads.<\/p>\n\n\n\n<p>Once you align the size and spacing of the fallback with your custom font, you ensure that when Roboto replaces Arial, the shift is minimal, keeping CLS low and improving the user experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. Find the Right Place To Host Web Fonts<\/h3>\n\n\n\n<p>Self-hosting your fonts doesn\u2019t always mean faster performance.<\/p>\n\n\n\n<p>Many third-party options also perform well\u2014and sometimes, they can even load faster.<\/p>\n\n\n\n<p>The <a target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2020\/fonts#fig-7\" rel=\"noopener\">Web Almanac<\/a> found that certain sites using third-party fonts rendered faster than those with self-hosted fonts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1500\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp\" alt=\"Bar chart comparing FCP and LCP load times for self-hosted, external, and combined font hosting methods, showing combined hosting is slowest.\" class=\"wp-image-58010 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-300x281.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1024x960.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-768x720.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1536x1440.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-600x563.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1200x1125.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-730x684.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1460x1369.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-784x735.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1568x1470.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-877x822.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1500;\" \/><\/figure>\n\n\n\n<p>Ultimately, font performance depends less on hosting choice and more on three key factors:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content Delivery Network (CDN):<\/strong> Ensures faster delivery by serving fonts from multiple locations worldwide.<\/li>\n\n\n\n<li><strong>HTTP\/2:<\/strong> Boosts loading speed by handling multiple requests in parallel, reducing latency.<\/li>\n\n\n\n<li><strong>Web Caching Policy:<\/strong> Caches fonts efficiently, so they don\u2019t need to be re-downloaded with each visit.<\/li>\n<\/ul>\n\n\n\n<p>Instead of getting stuck on the hosting debate, focus on setting up these essentials to keep your fonts loading smoothly, no matter where they\u2019re hosted.<\/p>\n\n\n\n<h2 id=\"h2_how-to-simplify-web-performance-optimization\" class=\"wp-block-heading\">How To Simplify Web Performance Optimization<\/h2>\n\n\n\n<p>If the techniques above feel too hands-on, a <a target=\"_blank\" href=\"https:\/\/automattic.pxf.io\/OrN6xZ\" rel=\"noopener\">plugin like Jetpack<\/a> can make it easy.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp\" alt=\"Marketing landing page showing Jetpack's WordPress optimization features with graphics of performance metrics and mobile devices.\" class=\"wp-image-58011 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-300x176.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-768x452.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1536x903.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-600x353.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1200x706.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-730x429.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1460x859.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-784x461.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1568x922.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-877x516.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/figure>\n\n\n\n<p>Jetpack, <a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/jetpack\" rel=\"noopener\">developed by Automattic<\/a> (the creators of WordPress), is an all-in-one solution built specifically for WordPress sites.<\/p>\n\n\n\n<p>It combines essential features for security, performance, and marketing, all managed from one platform.<\/p>\n\n\n\n<p>Even if you are non-technical, Jetpack can help improve site speed, strengthen security, and enhance the user experience. (No complex setups necessary!)<\/p>\n\n\n\n<h2 id=\"h2_create-the-perfect-balance-between-beauty-and-performance\" class=\"wp-block-heading\">Create the Perfect Balance Between Beauty and Performance<\/h2>\n\n\n\n<p>Web fonts give your site a unique, beautiful look.<\/p>\n\n\n\n<p>However, without the right tweaks, they can also slow it down and frustrate users.<\/p>\n\n\n\n<p>While we\u2019ve covered essential font optimization techniques, fine-tuning performance involves countless technical details.<\/p>\n\n\n\n<p>And getting the best results can feel overwhelming.<\/p>\n\n\n\n<p>That\u2019s where <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/pro-services\/\" rel=\"noopener\">DreamHost\u2019s professional web development services<\/a> come in.<\/p>\n\n\n\n<p>We\u2019ll make sure your site is beautiful and optimized for speed and user experience.<\/p>\n\n\n\n<p>Let us handle the technicalities while you focus on building a site that truly stands out.<\/p>\n\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/pro-services\/development\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Pro Services &#8211; Development<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tYou Dream It, We Code It\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tTap into 20+ years of development expertise. Just let us know what you want for your site \u2013 we\u2019ll take it from there.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><em>This page contains affiliate links. This means we may earn a commission if you purchase services through our link without any extra cost to you.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web fonts can impact your site&#8217;s Core Web Vitals. Learn simple tips to optimize web fonts and keep your website fast and user-friendly.<\/p>\n","protected":false},"author":1058,"featured_media":58013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Web fonts can impact your site's Core Web Vitals. Learn simple tips to optimize web fonts and keep your website fast and user-friendly.","toc_headlines":"","hide_toc":false,"footnotes":""},"categories":[12852],"tags":[],"class_list":["post-58000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Avoid the Performance Pitfalls of Web Fonts - DreamHost<\/title>\n<meta name=\"description\" content=\"Web fonts can impact your site&#039;s Core Web Vitals. Learn simple tips to optimize web fonts and keep your website fast and user-friendly.\" \/>\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-dev.dreamhost.com\/blog\/optimize-web-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize Web Fonts for Speed and User Experience\" \/>\n<meta property=\"og:description\" content=\"Web fonts add personality to your site but can slow it down if not optimized. Find strategies to keep your site both beautiful and high-performing by optimizing web fonts for speed and stability.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-25T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T15:36:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1220x628_ogimage_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Optimize Web Fonts for Speed and User Experience\" \/>\n<meta name=\"twitter:description\" content=\"Web fonts add personality to your site but can slow it down if not optimized. Find strategies to keep your site both beautiful and high-performing by optimizing web fonts for speed and stability.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Avoid the Performance Pitfalls of Web Fonts - DreamHost","description":"Web fonts can impact your site's Core Web Vitals. Learn simple tips to optimize web fonts and keep your website fast and user-friendly.","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-dev.dreamhost.com\/blog\/optimize-web-fonts\/","og_locale":"en_US","og_type":"article","og_title":"Optimize Web Fonts for Speed and User Experience","og_description":"Web fonts add personality to your site but can slow it down if not optimized. Find strategies to keep your site both beautiful and high-performing by optimizing web fonts for speed and stability.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-11-25T15:00:00+00:00","article_modified_time":"2026-03-11T15:36:18+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1220x628_ogimage_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_title":"Optimize Web Fonts for Speed and User Experience","twitter_description":"Web fonts add personality to your site but can slow it down if not optimized. Find strategies to keep your site both beautiful and high-performing by optimizing web fonts for speed and stability.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2026-03-11T15:36:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/"},"wordCount":2261,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","articleSection":["Website Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/","name":"How to Avoid the Performance Pitfalls of Web Fonts - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2026-03-11T15:36:18+00:00","description":"Web fonts can impact your site's Core Web Vitals. Learn simple tips to optimize web fonts and keep your website fast and user-friendly.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","width":1460,"height":1095,"caption":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/optimize-web-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"en","translations":{"en":58000,"es":58033,"it":68795,"fr":71167,"nl":71194,"pt":72377,"uk":72392,"pl":72423,"de":73073,"ru":73076},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/58000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=58000"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/58000\/revisions"}],"predecessor-version":[{"id":79961,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/58000\/revisions\/79961"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/58013"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=58000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=58000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=58000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}