The typeface displayed is Rubik Light Font instead of the regular Rubik font

I am currently working on incorporating the Rubik Font into my project:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 500; // or 400, or any, whatever
}

You can also check out a live demo using this Stackblitz link.

Despite my efforts, when I inspect it in Chrome Devtools, the computed font always appears as Rubik Light, regardless of the weight specified. I even tried downloading and using it locally without success.

How can I ensure that the font being displayed is just Rubik and not Rubik Light? Bold text with Rubik Light looks quite odd.

I'm struggling to figure out if the issue lies with the font itself.

htmlcssfonts

Answer №1

To achieve the desired font styles, I utilized the Google Fonts UI and obtained the following URL:

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');

Although it remains as Rubik Light, the styles are now being correctly applied.

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

Mobile viewing causing problems with website buttons functionality

While my website functions perfectly on desktop, I am facing an issue where the buttons are not working when accessed through mobile devices. Interestingly, these buttons were operating fine in a previous version of the site. Although I have made minimal ...

javascripthtmlcssmobile

The contact form is encroaching on the footer

The issue arises when the contact form overlaps with the footer. When testing the code on Codepen, the styles are correctly linked and working for everything except the contact form. I have attempted adjusting the padding, bottom position, etc., but nothin ...

htmlcssbootstrap-4

Clicking a button in VueJs will trigger the clearing of the displayed text and the subsequent execution of

Hello, I am new to the world of web development and I'm currently learning vue.js. I am working on an app where I input an ID and upon clicking the search button, a method is called. This method utilizes axios to make a request to the controller and ...

htmlvue.jsweb-applicationsvuejs2vue-component

Tips on transitioning between two tables

Recently, I created an HTML page entirely in French. Now, I am attempting to incorporate a language translation feature on the website that allows users to switch between French and English (represented by two flag icons). My concept involves using a tabl ...

javascriptjqueryhtml

Instructions on creating an input field and a slider simultaneously

Currently, I am exploring the world of CSS 3D transforms and I am particularly interested in creating sliders to manage these transforms. I recently stumbled upon the Three.js editor and was impressed by how it handles the positioning, rotation, and scalin ...

javascriptjqueryhtmlinputthree.js

Applying CSS to prevent elements from overlapping by adjusting their vertical positioning

I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...

htmlcss

Retrieve webpage using HTML stored in web storage

I am exploring a new idea for an application that utilizes local storage, and I am seeking guidance on the most effective way to load content after it has been stored. The basic concept of the app involves pre-fetching content, storing it locally, and the ...

javascriptjqueryajaxhtmllocal-storage

Issue with Bootstrap checkbox buttons not rendering properly

I'm attempting to utilize the checkbox button feature outlined on the bootstrap webpage here in the "checkbox" subsection. I copied and pasted the html code (displayed below) from that page into a jsfiddle, and checkboxes are unexpectedly appearing in ...

htmlcsstwitter-bootstrap

Rotate image in Vue3 using @click

I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...

javascriptcssvue.jsvuejs2

Stopping a parent's event from firing when clicking on child elements without interfering with the child element events

Having read several posts such as this one, I am exploring a method to click on the parent div for it to hide, without hiding when clicking on either the search box or the 'click for event 2' text. I have tried using onclick stop propagation to ...

javascripthtmlcss

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

The technique for concealing particular div elements is contingent upon the specific values within an array

My TypeScript code is returning an array in this format: allFlowerTypes (3) ['Rose', 'Bluebell' , 'Daisy'] I want to dynamically show or hide the following HTML content based on the array values above: <ul> <li> ...

htmltypescript

The npx command for react-native-assets is not producing any results

Struggling to incorporate custom fonts into my application, I've exhaustively researched solutions online without success. It seems that the only method compatible with React Native 0.70.5 is asset linking through npx react-native-asset. I attempted ...

react-nativenpmfonts

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

Facebook pages that exceed 700px in length without the need for scrollbars

Is there a way to extend the length of a Facebook page without scrollbars when using an iframe, so that it doesn't crop at 700px? ...

phphtmlfacebook

Apply a red border to any form inputs that contain incorrect information when the submit

How can I add red borders to my form inputs only when they are invalid after submission, without displaying the red borders from the start? Currently, I am using the input:invalid selectors in CSS, but this causes the red borders to appear immediately. I ...

htmlcssformsvue.jsvalidation

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

cssreactjscss-selectorsmouse-cursorcustom-cursor

How can I avoid C3.js legends from overlapping when hiding or showing a div?

Every time I visit a specific page, a simple chart is automatically generated: function displayOptions() { $("#div1").show(); chartRef.flush(); } function displayChoices() { $("#div1").show(); } $("#div1").hid ...

javascripthtmlc3.js

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface

Problem with Layering in Javascript Canvas Game using Kinetic JS

Currently, I am attempting to replicate the game found at and delving into html5 canvas and kineticJS for my study. Here is the link to my fiddle: http://jsfiddle.net/2WRwY/7/ The issues I am facing are as follows: The tail part of the player in the f ...

javascriptjqueryhtmlhtml5-canvaskineticjs