What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. I am currently experimenting with the Inter font available on Google Fonts, which is advertised as a variable font by both Google and the designer's site.

Despite the claims of being a variable font, when I try to select the Inter font in Google Fonts, I still need to individually choose the weights I wish to use. The generated <link> tag also specifies these weights, implying that separate files are being downloaded:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">

An additional issue I have encountered is the lack of italics support in the font. When attempting to render italics, faux italics are used instead. This was verified by applying the CSS rule font-synthesis:none:

font-style: italic;
font-synthesis: none ; /* Disables faux italics and other simulated styles: 
                          if no italic style is installed, defaults to normal

I am curious as to why this is happening and how I can utilize the full potential of the variable version of Inter via Google Fonts, including accessing the italics feature?

cssfontsgoogle-fontsvariable-fonts

Answer №1

Using Variable Font Query Tuples

Ensure you are utilizing the correct query tuples to access the variable font version; otherwise, Google Fonts will provide static font-file URLs instead.

https://fonts.googleapis.com/css2?family=Inter:slnt,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a5b5baa692ffe3e2fcfce2">[email protected]</a>,100..900

Note the ".." separators used to define the axes ranges.
You can verify this by opening the CSS link. If everything is correct, the result should resemble this:

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
}

(Specifically note the multiple values for weight and style properties like font-weight: 100 900).

Distinguishing Inter's Italic and Slanted Styles

The Inter variable font includes a slant axis, allowing for intermediate slanting angles to be utilized.
Additionally, there's "Inter Tight," which has tighter tracking and spacing and also offers an italic variant.
Despite subtle discrepancies between these variations, adding letter-spacing to Inter Tight makes it nearly indistinguishable from standard Inter.
The comparison extends to the slanted/oblique style in Inter versus the italic style available in Inter Tight – prompting debates on whether the latter can be deemed a "true" italic.

/* latin */

@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/intertight/v7/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */

@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/intertight/v7/NGSyv5HMAFg6IuGlBNMjxLsCwapkRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: 'Inter';
  font-size: 5vmin;
}

.slant {
  font-variation-settings: "slnt" -10;
}

.tight {
  font-family: 'Inter Tight';
  letter-spacing: 0.055em
}

.italic {
  font-style: italic
}
<p class="">Hamburgefonstiv 1234 (Inter)</p>
<p class="tight">Hamburgefonstiv 1234 (Inter tight)</p>
<p class="slant">Hamburgefonstiv 1234 (Inter slanted/oblique)</p>
<p class="tight italic">Hamburgefonstiv 1234 (Inter tight italic)</p>

Additional insights on quirks in Google Font UI: "Google Fonts - variable fonts not working in Windows browsers"

Answer №2

When using Google Fonts, you have the option to select a non-standard value in the Variable axes section. However, keep in mind that even though you can input these values, Google still serves smaller and more specific files to avoid large requests, resulting in some approximation.

For instance, selecting 401 and 410 will yield the exact same file as a response, with the only difference being the font-weight in the style.

Take a look at them here:

Also, it seems that Inter is not available in italics at this time.

Answer №3

You can incorporate variable fonts from Google Fonts into your website, although you cannot select specific weights. For additional details, visit:

Answer №4

Consider customizing the rendering of italic text by overriding the default styling:

em,
i {
    font-style: normal;
    font-variation-settings: "slnt" -10;
}

This approach allows you to have more control over how italic text is displayed, rather than relying on the browser's interpretation.

If you want to see a live example, check out this Codepen link:

https://codepen.io/squarecandy-1472176736/pen/GRebKRY

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?

Styling for different screen sizes: @media (min-width: 991px) and (max-width:768px){} .container, .container1, .container2 .container3{ float: left; } .container1{ width: 50%; } .container2{ width: 50%; } .container3{ width: 100%; } /**** ...

htmlcssmedia-queries

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

javascriptjqueryhtmlcss

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...

cssfilecompressionminify

Tips for addressing Navbar collision with body content or other pages using CSS

I have successfully created a navigation bar using CSS and JS. The image below illustrates the example of my navigation bar: https://i.sstatic.net/2l4gj.png The issue I am facing is that when I select "MY ACCOUNT," it displays some content. However, upon ...

javascripthtmlcss

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Within a row, there are two views with flex: 1 containing text. <View style={{ flexDirection: "row", padding: 5 }}> <View style={{ flex: 1 }}> <Text>Just a reallyyyyyyyy longgggg text</Text> </View> ...

javascriptcssreactjsreact-native

Issues with Bootstrap's hamburger menu not functioning properly when clicked

Can't seem to get my hamburger button working. I've followed the bootstrap documentation and ensured that Bootstrap and jQuery are in the correct order, but still no luck. Any suggestions on what could be causing this issue? Are my links misplace ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for spinning HTML5 Canvas's background image and adjusting the zoom with a slider

As someone who is new to the world of coding, I have a few goals in mind: First and foremost, I want to create a canvas. I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images ...

jquerycsshtml5-canvas

The Vue 3 page does not allow scrolling unless the page is refreshed

I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...

cssvue.jsvuejs3bootstrap-vuevue-composition-api

Is the use of !important included in Bootstrap 4?

Even though I've positioned the style.css file after Bootstrap, it still isn't working. Upon inspection, I noticed that... https://i.sstatic.net/ay621.png How can I solve this issue? .bg-info{ background-color: #17a2b8 !important; } ...

htmlcsstwitter-bootstrapbootstrap-4css-specificity

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

When using the jQuery Cycle plugin in IE8 (as well as other versions of Internet Explorer), I am encountering an issue. My slideshow consists of 3 slides, each containing a Title, Description, and Image. The problem arises when viewing the slideshow in I ...

javascriptjqueryhtmlcsscycle

Utilize CSS block display for ::before and ::after pseudo elements within a div container

I have a CSS file that contains the following code snippet: .loader { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-fam ...

htmlcssdisplay

Several buttons, each requiring to show distinct text

Currently, I am attempting to enhance an existing project that was graciously created for me. I must admit, I am quite new to this, so please be patient with me! In my project, there are 9 buttons, each triggering the display of a different image upon bei ...

javascriptjquerycssonclickreactjs

Bootstrap Dropdown Functionality Malfunctioning

Here is a simple piece of HTML code that I have created: <!doctype html> <html> <head> <meta charset="utf-8"> <title>.:Home Page:. The Indian Sentinel</title> <link rel="stylesheet" href=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

htmlcssvertical-alignment

Floating CSS3 animations within HTML elements

I'm struggling to understand why the animated arrow on my website refuses to go behind the other elements. The animation code I've used for the arrow in CSS3 is as follows: -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-an ...

htmlcsscss-animations

Tips for repairing a horizontal line at the bottom of the <TD> tag and placing text on top

I am working with an HTML table that contains a single TR tag and two TD tags. Each TD has two HR tags creating horizontal lines, along with some text. I am looking for a way to keep the text aligned at the top of the TD and the horizontal line at the bott ...

htmlcss

Steps to create a horizontal animation using CSS3

I have 6 different CSS3 animations that I want to split between going right and left. Can these animations be applied separately or do they all have to be the same direction? Is it also possible to adjust the speed of each animation individually? Here is ...

htmlcss

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?

Adding the border-radius CSS property to my dropdown component from ant design has been a bit challenging for me. I attempted to modify the antd-css file and include a style object directly into the component, but unfortunately, I did not achieve the des ...

cssreactjsantdstyled-componentsant-design-pro

Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gap ...

cssborderline-numberscss-counter