Troubleshooting CSS font-variation-settings not functioning

Exploring the possibilities of variable fonts has been my latest project. In my initial test, I played around with the font-variation-settings directive, but unfortunately, it doesn't seem to be functioning properly. This was evident on both Codepen:

https://codepen.io/DailyMatters/pen/LrBvmz

Here is the CSS code I am currently using (it appears that the font is loading correctly from dropbox):

@font-face {
  font-family: 'SourceSans';
  src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}

html {
  font-family: 'SourceSans', sans-serif;
}

p {
  font-variation-settings: "wght" 999, "wdth" 125;
}

However, the issue persists even when trying it out on Chrome.

No matter how much I adjust the "wght" axis, there is no visible change. When I ran similar tests with the same font using @font-face, everything worked as expected in Chrome. What could possibly be causing this discrepancy between font-variation-settings and @font-face?

css

Answer №1

To customize the font variation in your website, add the properties font-stretch and font-weight with your desired range to your @font-face declaration in your CSS file.

Ensure that the font you choose supports these variations, as not all fonts have the same level of flexibility. You can check out the support for variable fonts in Google fonts here.

If you are facing issues with loading a specific font in your Codepen project, try adjusting the code like this:

@font-face {
  font-family: 'SourceSans';
  font-weight: 400 900;
  font-stretch: 75 100;
  src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}

For more detailed information, refer to:

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

and

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

What causes the inconsistency in CSS Hover behavior?

Looking to devise a button in css and html that reveals another button below it by rotating on its lowermost axis when hovered over. Progress has been made here: http://codepen.io/machinarius/pen/BdtCb However, there seems to be an issue with the hover b ...

csscss-animations

Tips for making a table header span multiple columns in HTML5

Could someone help me with making my HTML5 heading span across the columns in the table? I want the table to end on the far right with the vertical line appearing at the right end of the table. Any assistance would be greatly appreciated! For reference, ...

htmlcss

Adjusting the width of images using jQuery Mobile or jqTouch

I am looking to incorporate a static footer image with 5 navigation buttons into my mobile website. You can view the image here. The default color for the icons should be blue, but I want the yellow icon to appear only when hovered over or in an active sta ...

iphonecssmobile-websitejqtouchjquery-mobile

Implementing a dual-column design for MailChimp using HTML and CSS

I'm feeling overwhelmed. I have a MailChimp layout that I exported from MailChimp. Currently, the layout consists of 3 columns, but on mobile, it converts to 1 column. Here is the link to the codepen: goo.gl/Fj8Ct7 Is there anyone who can assist me ...

htmlcssmailchimp

Color of Bootstrap tooltip arrow outline and fill

How can I customize the background color and border color of the tooltip arrow in Bootstrap 4? $(function() { $('[data-toggle="tooltip"]').tooltip() }) .tooltip-main { width: 15px; height: 15px; border-radius: 50%; font-weig ...

csstwitter-bootstrapbootstrap-4

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

phphtmlcsstextboxtags

I have a desire to use Javascript to control CSS styles

Within the CSS code below, I am seeking to vary the size of a square randomly. This can be achieved using the Math.random() property in Javascript, but I am uncertain how to apply it to define the size in CSS. #square { width: 100px; height: ...

javascriptcss

Tips for creating stylish diagonal backgrounds using Bootstrap 5

Is there a way to achieve diagonal styled backgrounds, like the examples shown below, while using Bootstrap 5 and (s)css? It would be ideal if this could be seamlessly integrated with other Bootstrap background utilities as outlined in the documentation h ...

htmlcsstwitter-bootstrapsassbootstrap-5

Create dynamic CSS pseudo content for before/after in Angularjs automatically

I have a question regarding applying pseudo elements dynamically using Angular. I have a div element where I need to push data to the content attribute in CSS dynamically from my scope. How can I achieve this with Angular? Here is a sample CSS: .bar:befo ...

jquerycssangularjs

Aligning Divs in a Responsive Browser

In the following illustration, I am facing an issue with my responsive code. I have three sections named square1, 2, and 3, each containing a white div with text on top and an icon positioned absolutely. Everything works fine when the browser width is 920p ...

htmlcss

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

javascriptcsshtml

Closing an Electron Dialog triggers a refresh on my current page

I currently have an Electron application in place. It utilizes Bootstrap v4, Electron v2, as well as other node modules. One concern I am facing is related to a button that triggers an Electron dialog box where users can select a folder. Upon selecting th ...

htmlcssnode.jsbootstrap-4electron

Tips for keeping Sub Menu visible at all times

Is there a way to keep the sub menu always visible on the homepage of my website's navigation? Thank you for your help! Check out my website here ...

htmlcsswordpress

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

javascripthtmlcss

How to perfectly align responsive email on iPhone 6

My email design appears aligned to the left on iPhone 6 even though I have used align="center" on the tables and TD's. In my media queries, I have specified a width of 320px with the main table set to width="100%". @media only screen and (max-device- ...

htmlcssmedia-querieshtml-emailiphone-6

Challenge with the Bootstrap 3 grid structure involving nesting

On my .aspx page, I have the code snippet below: .cDiv { background-color: gray; } .tColor { background-color:yellow; } .tColor2 { background-color:blue; } <div class="container"> <div class="row"> <div class="col-sm-9 tColor" ...

csstwitter-bootstrap-3bootstrap-grid

Uncovering intricate CSS selector techniques

I need help with filling text in a Selenium Firefox browser. I am struggling to find the selector for entering text and it seems very complex for me. Please explain the only way I can achieve this using only CSS selectors. <div class="Gb WK"> < ...

cssseleniumcss-selectors

Text wrapping over in 5 column design using Bootstrap

After building a simple webpage with Bootstrap 5, I've run into an issue where the text in the columns overlaps. When the screen is at its full size, everything looks good. But as I start to reduce the size of the screen, the text gets smaller until t ...

htmlcssbootstrap-5

Make sure that the element with a relatively positioned stays contained within the top container

While relative and absolute positioning can be useful, they have the drawback of taking elements out of the flow which can lead to restrictions in their usage. Recently, I came across one such restriction and I'm interested to see if there is a soluti ...

htmlcss

Ways to create diagonal or vertical table breaks using CSS

If you have a <table> that is very tall or wide and you want it to wrap for screen display, how can this be achieved using CSS? For example, a table that is 300% page height and 30% page width would be divided into three parts. # # # # # # beco ...

htmlcsshtml-table