{"id":41534,"date":"2022-11-28T15:00:20","date_gmt":"2022-11-28T14:00:20","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=41534"},"modified":"2022-11-23T11:53:42","modified_gmt":"2022-11-23T10:53:42","slug":"how-to-use-variable-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-use-variable-fonts-in-wordpress\/","title":{"rendered":"How to Use Variable Fonts in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Fonts are an integral part of any website&#8217;s design. They hugely impact the image of a website and can completely alter the design&#8217;s style.<strong> Font style dictates the atmosphere on a site and shapes the message you want to convey.<\/strong> It would be a pity to stick to using the same font, in the same size, height, weight, and spacing all across your website and miss all the fine nuances variable fonts can bring. You will be amazed how much variety just a bit of customization can offer even when you decide to use just a single font.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Variable fonts allow you to have many different fonts incorporated in a single file, unlike a typical font that needs at least four files.<\/strong> They are an extension of the OpenType font specification that relieves you from having to create a separate font file for every style, weight, or width.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we&#8217;ll show you how to use variable fonts in WordPress in just a few steps. Keep reading to find out:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-do-variable-fonts-work\">How Do Variable Fonts Work?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#installing-the-font-on-your-website\">Installing the Font on Your Website<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#finding-variable-fonts\">Finding Variable Fonts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-choose-the-right-font\">How to Choose The Right Font<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-do-variable-fonts-work\"><\/a>How Do Variable Fonts Work?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/ABC.jpg\" class=\"attachment-full size-full\" alt=\"ABC\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/ABC.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/ABC-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/ABC-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/ABC-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]How does a variable font work? It starts with a default style which is usually the &#8216;Regular&#8217; font style, characterized by an upright design and the most common weight and width. It is most often used for plain text. This default style is connected to other styles in a continuous range and these styles are called the axis. <strong>There are five common axes &#8211; slant, width, weight, italics, and optical size.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Each individual style can be placed along an axis and it is called the &#8216;instance&#8217; of the variable font.<\/strong> For example, the variable font Roboto Flex offers three different styles for the weight axes. At the opposite ends to the axes, there are two styles and the regular style is in the middle. There are 900 instances you can choose from.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>So, a variable font is a single font that can be customized across five different criteria or axis &#8211; weight, slant, italics, optical size, and width.<\/strong> Every alteration is done with CSS and each ax controls one of the facets in the appearance of the font. Each aspect includes a corresponding CSS label:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Weight (wght in CSS)<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Slant (slnt in CSS)<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Italics (ital in CSS)<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Optical Size (opsz in CSS)<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Width (wdth in CSS)<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You can mix and combine all those aspects of the font to alter it and completely change the way your font looks.<\/strong> It is even possible to animate fonts like SVGs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, instead of having to incorporate multiple fonts on your website, a variable font allows you to use just one that you can alter to appear completely different for different purposes. One of the greatest advantages of variable fonts is that they can be great for animations. They provide you with a smooth and easy way to animate transitions between different font weights just by using CSS. <strong>They are also an ideal solution in cases when you&#8217;re using the same font in too many places across your website<\/strong> and have already exhausted all of its available styles.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"installing-the-font-on-your-website\"><\/a>Installing the Font on Your Website<\/h2>\n<p>[\/vc_column_text][vc_column_text]After you find the right font for your website, the first step is to install it. There are many plugins to help you with that like <a href=\"https:\/\/wordpress.org\/plugins\/custom-fonts\/\" target=\"_blank\" rel=\"noopener\">Custom Fonts<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/use-any-font\/\" target=\"_blank\" rel=\"noopener\">Use Any Font<\/a>, and similar. If you need some help with installing custom fonts on your site, here is a detailed explanation of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-custom-wordpress-fonts\/\">custom font installation<\/a> process. <strong>No matter how you choose to have your selected font installed, the result is the same, and the way you can manage your font is also the same.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As we explained earlier, <strong>variable fonts are CSS-based which means you can find them in all the places where you added your custom CSS<\/strong>. That practically means a variable font can be in a custom.css file, a stylesheet.css, and similar places. What you need to do is to enter the code below and include the name of the variable fonts you have chosen to use:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">01 @font-face {\r\n02 font-family:'Gingham';\r\n03 src: url('Gingham.woff2') format('woff2'),\r\n04 }<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This way, you enable the use of the variable font on your website. Now, you can proceed to style the font. <strong>You can apply styling to any class or ID and make your font appear totally different. It is up to you to decide whether you want to apply customization only on H1, H2, H3, the whole page, or the whole post.<\/strong> There are two ways to alter the font &#8211; to enter all the changes in one single line of code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">01 h2 {\r\n02 font-family: 'Gingham',Helvetica,sans-serif;\r\n03 font-size: 30px;\r\n04 font-variation-settings: 'wght' 500, 'wdth' 55;\r\n05 }<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also split the alteration into multiple lines of code if you find it more convenient:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">01 h2 {\r\n02 font-family: 'Gingham',Helvetica,sans-serif;\r\n03 font-size: 30px;\r\n04 wdth: 750;\r\n05 wght: 400;\r\n06 }<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This way you can basically make all kinds of font alterations anywhere on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"finding-variable-fonts\"><\/a>Finding Variable Fonts<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/Fonts-Type-Tester.jpg\" class=\"attachment-full size-full\" alt=\"Fonts Type Tester\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/Fonts-Type-Tester.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/Fonts-Type-Tester-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/Fonts-Type-Tester-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/11\/Fonts-Type-Tester-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Google Fonts are the most popular go-to resource for free fonts, but they do not offer a wide choice of variable fonts.<strong> If you want to stick to Google fonts you can use the Recursive variable font family from Google Fonts.<\/strong> This is an open-source, OFL font and you can see more about it at recursive design. Some of the other popular free variable fonts are Gingham and League Mono. You can find a wide choice of free variable fonts at <a href=\"https:\/\/fontesk.com\/tag\/variable\/\" target=\"_blank\" rel=\"noopener\">150+ Free Variable Fonts \u203a Fontesk<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the premium variable fonts, the choice is of course richer. You can explore Adobe Typekit, <a href=\"https:\/\/v-fonts.com\/\" target=\"_blank\" rel=\"noopener\">V-fonts<\/a>, <a href=\"https:\/\/www.monotype.com\/\" target=\"_blank\" rel=\"noopener\">Monotype<\/a>, and many more resources.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-choose-the-right-font\"><\/a>How to Choose The Right Font<\/h2>\n<p>[\/vc_column_text][vc_column_text]Choosing the right font for your website requires you to consider many different aspects of your web design as well as to estimate <strong>which style exactly will empower your brand and not jeopardize the overall message you aim to convey<\/strong>. How the font style matches your brand essence, which variations to use at which locations on your website, and should you stick to the familiar styles or experiment with something new &#8211; these are all the questions that require serious consideration.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Bear in mind that choosing the right font can significantly improve both your website&#8217;s design and user experience. Luckily, once you get the hang of it, a variable font is usually easy to use and tweak so that you can try out different styles until you find the variations that work best for you.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Variable fonts introduce many exciting possibilities without burdening the user with too complicated procedures. <strong>They may require some experience with code, but even a total beginner can learn to use them quickly by carefully following the instructions for their use.<\/strong> Since variable fonts are relatively new, we can surely expect many more improvements and possibilities in the near future.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Explore the options that using variable fonts in WordPress opens for you! <\/p>\n","protected":false},"author":42889,"featured_media":41548,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[277,4,13],"class_list":["post-41534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-fonts","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/41534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/42889"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=41534"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/41534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/41548"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=41534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=41534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=41534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}