{"id":52462,"date":"2024-09-10T17:08:38","date_gmt":"2024-09-10T14:08:38","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=52462"},"modified":"2026-01-20T12:10:48","modified_gmt":"2026-01-20T10:10:48","slug":"use-variable-fonts","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/use-variable-fonts\/","title":{"rendered":"Use Variable Fonts"},"content":{"rendered":"\n<p>Variable fonts are an advanced font technology that allows a single font file to contain multiple styles and variations, such as different weights, widths, and optical sizes. Unlike traditional fonts, which require separate files for each style (e.g., bold, italic, condensed), a variable font can adjust these characteristics dynamically within a single file.<\/p>\n\n\n\n<p>Variable fonts have several advantages over traditional fonts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Control<\/strong>: With traditional fonts, you\u2019re limited to predetermined characteristics. For instance you may have to choose between a weight of 400 or 600. With variable fonts you have complete control, letting you choose a weight of 475 if that\u2019s best for your design.&nbsp;<\/li>\n\n\n\n<li><strong>Performance<\/strong>: By using a single font file that includes all variations, variable fonts can reduce the number of HTTP requests and the overall file size needed to load different font styles, improving website performance.<\/li>\n\n\n\n<li><strong>Responsive Typography<\/strong>: Variable fonts allow for dynamic adjustments to typography based on screen size, resolution, or user preferences. For example, a font could become more condensed on smaller screens to save space or increase contrast at smaller sizes for better readability.<\/li>\n\n\n\n<li><strong>CSS Integration<\/strong>: Variable fonts can be controlled using CSS. Properties like `font-weight`, `font-stretch`, and `font-style` can be adjusted with values beyond the usual fixed set, providing more granular control. This also means you can add animations to variable fonts.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Add Variable fonts<\/h2>\n\n\n\n<p>Before using variable fonts, you need to import them using WP Admin.&nbsp;<\/p>\n\n\n\n<p><strong>Note<\/strong>: Variable fonts have several variables you can use to adjust them. Width and weight are the two most commonly used and these two are supported in Elementor.&nbsp;<\/p>\n\n\n\n<p><strong>To add a variable font<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Locate a variable font you would like to use and download it to your PC. You may need to unzip the file.&nbsp;<br>Variable fonts are available from a number of providers including Google Fonts. In Google Fonts you can check the minimum and maximum weight and width by clicking <strong>Type Tester <\/strong>and using the sliders to figure out the minimum and maximum values.<br><img decoding=\"async\" style=\"width: 580px;\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg\"><br>Record the minimum and maximum weight and width of the font. You\u2019ll need that later.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"280\" height=\"238\" class=\"wp-image-159753\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/custom-elements.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/custom-elements.png 500w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/custom-elements-300x255.png 300w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Go to WP Admin and navigate to <strong>Elementor&gt;Editor&gt;Custom elements<\/strong>.<br>The Custom Fonts screen appears.&nbsp;<br><img decoding=\"async\" width=\"640\" height=\"365\" class=\"wp-image-159760\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-newe-font-button.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-newe-font-button.png 2083w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-newe-font-button-300x171.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-newe-font-button-1024x584.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-newe-font-button-768x438.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-newe-font-button-1536x876.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-newe-font-button-2048x1168.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>Click <strong>Add New<\/strong> font.<br><img decoding=\"async\" width=\"640\" height=\"365\" class=\"wp-image-160579\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-variable-font.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-variable-font.png 2083w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-variable-font-300x171.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-variable-font-1024x584.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-variable-font-768x438.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-variable-font-1536x876.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/add-variable-font-2048x1168.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>Click <strong>Add Variable Font<\/strong>.<br>The upload screen appears.<br><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"365\" class=\"wp-image-160595\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/upload-variable-font.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/upload-variable-font.png 2083w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/upload-variable-font-300x171.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/upload-variable-font-1024x584.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/upload-variable-font-768x438.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/upload-variable-font-1536x876.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/upload-variable-font-2048x1168.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>Click <strong>Upload<\/strong> and navigate to the location of the font file.<br><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"302\" class=\"wp-image-52470\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/09\/image-5.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/09\/image-5.png 1600w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/09\/image-5-300x141.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/09\/image-5-1024x483.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/09\/image-5-768x362.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/09\/image-5-1536x724.png 1536w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>Select the Variable font file and, in the lower right, click <strong>Select ttf file<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"365\" class=\"wp-image-160610\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-name.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-name.png 2083w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-name-300x171.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-name-1024x584.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-name-768x438.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-name-1536x876.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-name-2048x1168.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>In the <strong>Enter Font Family<\/strong> text box, give the font a name.<br><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"365\" class=\"wp-image-160624\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-values.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-values.png 2083w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-values-300x171.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-values-1024x584.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-values-768x438.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-values-1536x876.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/variable-font-values-2048x1168.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>Check <strong>Width<\/strong> and enter the minimum and maximum width of your font. This information is available from the font creator.<\/li>\n\n\n\n<li>Check <strong>Weight<\/strong> and enter the minimum and maximum weight of your font. This information is available from the font creator.<br>[callout type=&#8221;note&#8221;]You must set a minimum and maximum weight and\/or width in order for the font to behave correctly. Not all fonts contain both the width and weight variable. In these cases, just check the relevant variable.[\/callout]<br><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"365\" class=\"wp-image-160631\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/publish-variable-font.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/publish-variable-font.png 2083w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/publish-variable-font-300x171.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/publish-variable-font-1024x584.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/publish-variable-font-768x438.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/publish-variable-font-1536x876.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/publish-variable-font-2048x1168.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>Click <strong>Publish<\/strong>\/<strong>Update<\/strong>.<br>You can now use this font in the Elementor Editor.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Use variable fonts in the Elementor Editor<\/h2>\n\n\n\n<p>Once you\u2019ve installed the variable fonts, you can use them in any widget which has a typography option. In the example below we\u2019ll use a variable font in the Heading widget.<\/p>\n\n\n\n<p><strong>To use variable fonts in a widget<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag a widget that has text in it to the canvas.<br><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"338\" class=\"wp-image-160820\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-variable.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-variable.png 2309w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-variable-300x159.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-variable-1024x541.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-variable-768x406.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-variable-1536x812.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-variable-2048x1083.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><br><\/li>\n\n\n\n<li>In the panel, select the <strong>Typography<\/strong> option. This option can usually be found in the <strong>Style<\/strong> tab.<\/li>\n\n\n\n<li>Click the pencil icon <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXc6WCEemLSnnyYBDQ0bS4GBD12_norb8tdULPuoP4q8L23bdW3JnlpIipGgDUIku6zMy1o018Hp_9hXFoiMbS2S1hL0TD5v7TIiB_6YgFC5EqOMMxdZJb5HOYvDpyPn00ZRNou6FDQNekscl_snqCD7UuM?key=viUyO6DAU3C4TAAdV71gYg\"> .<br>A list of fonts and font options appears.<br><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"338\" class=\"wp-image-160813\" style=\"width: 640px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-location.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-location.png 2309w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-location-300x159.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-location-1024x541.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-location-768x406.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-location-1536x812.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/typography-location-2048x1083.png 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><br><\/li>\n\n\n\n<li>Select a variable font. These fonts are located at the top of the fonts list in a section labeled <strong>Variable fonts<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"895\" class=\"wp-image-160827\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/weight-width.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/weight-width.png 288w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/weight-width-94x300.png 94w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Use the <strong>Width<\/strong> and\/or <strong>Weight<\/strong> sliders to determine the font\u2019s appearance.<br>Your text now appears exactly as you want it.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Variable fonts are an advanced font technology that allows a single font file to contain multiple styles and variations, such as different weights, widths, and optical sizes. Unlike traditional fonts, which require separate files for each style (e.g., bold, italic, condensed), a variable font can adjust these characteristics dynamically within a single file. Variable fonts [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["66e052e89e89f4caf0a6b74c"],"footnotes":""},"categories":[1458],"tags":[1389,1388,1387,1390,1235,1411],"class_list":["post-52462","post","type-post","status-publish","format-standard","hentry","category-site-settings","tag-advanced","tag-agency","tag-essential","tag-expert","tag-pro","tag-version-3-24"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Use Variable Fonts | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Use Variable Fonts in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/use-variable-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use Variable Fonts | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Use Variable Fonts in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/use-variable-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-10T14:08:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T10:10:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Use Variable Fonts\",\"datePublished\":\"2024-09-10T14:08:38+00:00\",\"dateModified\":\"2026-01-20T10:10:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/\"},\"wordCount\":644,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Pro\",\"Version 3.24\"],\"articleSection\":[\"Site settings\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/\",\"url\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/\",\"name\":\"Use Variable Fonts | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg\",\"datePublished\":\"2024-09-10T14:08:38+00:00\",\"dateModified\":\"2026-01-20T10:10:48+00:00\",\"description\":\"Learn everything about Use Variable Fonts in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/use-variable-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage\",\"url\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg\",\"contentUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/use-variable-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Universal settings\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Site settings\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/site-settings\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Use Variable Fonts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use Variable Fonts | Elementor","description":"Learn everything about Use Variable Fonts in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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:\/\/elementor.com\/help\/use-variable-fonts\/","og_locale":"en_US","og_type":"article","og_title":"Use Variable Fonts | Elementor","og_description":"Learn everything about Use Variable Fonts in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/use-variable-fonts\/","og_site_name":"Help","article_published_time":"2024-09-10T14:08:38+00:00","article_modified_time":"2026-01-20T10:10:48+00:00","og_image":[{"url":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg","type":"","width":"","height":""}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Use Variable Fonts","datePublished":"2024-09-10T14:08:38+00:00","dateModified":"2026-01-20T10:10:48+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/"},"wordCount":644,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg","keywords":["Advanced","Agency","Essential","Expert","Pro","Version 3.24"],"articleSection":["Site settings"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/","url":"https:\/\/elementor.com\/help\/use-variable-fonts\/","name":"Use Variable Fonts | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg","datePublished":"2024-09-10T14:08:38+00:00","dateModified":"2026-01-20T10:10:48+00:00","description":"Learn everything about Use Variable Fonts in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/use-variable-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/#primaryimage","url":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg","contentUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdLEdGQ-AcmQEVEWMBv8Ip_36ert-zKUbFUDVWLSeUQoab5eowxmCEP8gI0VYcNdAV2JWESWbc6M9x8eBLwFnLEPBirxwVTbcGNOADRujm8CHWB9eLQXttf_2UBcbOQ1Oho-4WVfn3_UjxRo6x9yGjaYjo?key=viUyO6DAU3C4TAAdV71gYg"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/use-variable-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Universal settings","item":"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/"},{"@type":"ListItem","position":4,"name":"Site settings","item":"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/site-settings\/"},{"@type":"ListItem","position":5,"name":"Use Variable Fonts"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/52462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=52462"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/52462\/revisions"}],"predecessor-version":[{"id":161911,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/52462\/revisions\/161911"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=52462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=52462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=52462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}