What is preventing the lighter and bolder font weights from functioning properly?

I am currently developing an app using Ionic and I have chosen to include the custom font 'Rubik'. Despite importing both 'lighter' and 'bolder' font weights, they do not seem to apply - whenever I set the style, it defaults to the normal weight. Below is the code snippet:

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Light.otf') format('opentype');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Black.otf') format('opentype');
  font-weight: bolder;
  font-style: normal;
}

I have also experimented with:

@import url('https://fonts.googleapis.com/css?family=Rubik');

These adjustments were made in the variables.scss file. Currently, the only workaround I have found is by creating a new font family for lighter/bolder instead of utilizing it as normal. Lighter and bolder weights function correctly with default fonts like roboto and noto-sans that are pre-installed in Ionic. Any suggestions on how to resolve this issue?

htmlcssangularfontsionic2

Answer №1

To import/load the desired font weights, I recommend using the following code:

<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700,900" rel="stylesheet">

You can define the font-face styles like this :

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

Then, you can use the defined fonts like so :

h1 {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
}
h2 {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
}

p {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
}

fig {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
}

If you want easier access to these font weights, consider creating a function/mixin in SCSS or defining variables like this : 

@mixin fontRubik($weight) {
  @if($weight == 'bold') {
     font-weight: 700;
  } @elseif($weight == 'black') {
     font-weight: 900;
  } @elseif($weight == 'light') {
     font-weight: 300;
  } @else {
     font-weight: 400;
  }
}

Answer №2

lighter is defined as being one font weight lighter than the parent element, chosen from the available weights of the font.

bolder is defined as one font weight heavier than the parent element, selected from the available font weights.

These are considered to be relative weights.

When creating a new font-face and specifying a particular weight, it must be an absolute value since there is no point of reference for it to be relative to.

This explains why lighter and bolder are not included in the list of valid values, resulting in CSS being reported as invalid.

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

Is there a ShadowDom issue causing display problems on Angular Elements when using Material Dialog?

Exploring the world of Angular Elements within Angular 7 has been an exciting journey for me. I have delved into creating lightweight web components that can seamlessly integrate into existing web pages with ease. Initial tests showed great promise, but I ...

angulardialogelementshadow-dom

Issue with jquery curvy corners not functioning properly on Internet Explorer 8

Check out my website at If you view the page in IE8 and then in IE7 compatibility mode, you'll notice a strange issue. The box on the right disappears in IE8 but displays perfectly rounded corners in IE7. I am currently using the jQuery Curvy Corner ...

javascriptjqueryhtmlcsscurvycorners

Searching for all class names or ids within a CSS file that include a background image can be achieved by utilizing regular expressions in conjunction with PHP

Is there a way in PHP to extract the class name or ID from text using regular expressions? For example: .vc_custom_1547091583528{ margin-bottom:40px!important; padding-top:7rem!important; padding-bottom:1rem!important; background:#092746 ...

phpcssregex

Using Angular NgUpgrade to inject an AngularJS service into an Angular service results in an error message stating: Unhandled Promise rejection: Cannot read property 'get' of undefined; Zone:

I have noticed several similar issues on this platform, but none of the solutions seem to work for me. My understanding is that because our Ng2App is bootstrapped first, it does not have a reference to $injector yet. Consequently, when I attempt to use it ...

angularjsangulartypescriptng-upgradeangular-upgrade

Unable to locate module 'fs'

Hey there, I'm encountering an issue where the simplest Typescript Node.js setup isn't working for me. The error message I'm getting is TS2307: Cannot find module 'fs'. You can check out the question on Stack Overflow here. I&apos ...

node.jsangulartypescript

The connection to the Max CDN link for Font Awesome seems to be unavailable at the moment

Utilizing Font Awesome icons on my website has been a consistent practice. Lately, I've noticed that the link to the icons is broken or unreachable. Could there be an issue with their repository? I'm not even able to download static files from ...

htmlcssfontsfont-awesomecdn

What is the best way to implement a link that triggers a chat box in HTML?

Hello, I need some assistance with an HTML project. I am attempting to create a hyperlink that displays as a group of words, and when clicked, triggers a pop-up message. Additionally, I would like to have control over the content displayed in the pop-up ...

htmlpopup

Modify the layout and alignments of the ASP.NET user interface

Recently, I inherited a website built in ASP.NET and one of my responsibilities is to revamp its appearance by tweaking and correcting the div tags. I noticed that the previous developer utilized tables for layout purposes, especially when it came to setti ...

asp.netcssuser-interface

When using Angular's .navigateByUrl() method, it successfully navigates to the desired page, however the html content is not

Whenever I try to navigate to the home page after logging in, I encounter an issue. I have a navbar <app-header></app-header> with two links - one for signing up and another for logging in. After successfully logging in, my goal is to navigate ...

angulartypescripthttp-redirectangular-ui-routerangular2-routing

Cannot find solutions for all parameters for [object Object] in Angular 2

Encountering an error when attempting to navigate to a component that utilizes the angular2-google-maps module. The specific error message is: Can't resolve all parameters for [object Object] (?). ; Zone: angular ; Task: Promise.then ; Unable to ...

javascripttypescriptangularsystemjs

The routerlink feature consistently directs back to the default page

I am facing an issue where my routerlink does not redirect me to the correct path in app.routes.ts when clicked. Even though the routerlinks are set as 'user/teams' and 'user/dashboard' respectively. I can access the pages by directly ...

angulartypescriptangular2-routingangular-standalone-components

Angular - Show labels instantly, without needing their values

My component is designed to show users' attributes such as their name and email. I want to display the labels right away, without having to wait for the values to be fetched. I did find a solution, but I'm not satisfied with it because it involve ...

angularhttpclient

Guide to accessing the request body in an Angular application with Server Side Rendering

I am currently working on an application that generates PDFs using Angular server-side rendering. I am trying to utilize the request body within the Angular components, and here is a code sample illustrating what I am attempting: server.ts file server.p ...

node.jsangularexpressserver-side-renderingangular-universal

Why are my indents disappearing when I save in VS Code?

Just starting out with HTML and running into an issue where my indents keep disappearing whenever I save. Here's an example of what's happening. Before saving: After saving: I've experimented with different formatting tools and double-che ...

html

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

javascriptangulartypescriptsonarqubesonarlint

Interacting between two Angular 4 applications

I came across solutions here and here related to this issue, but they seem to be for an older beta version of Angular (I believe now we should bootstrap a module, not a component; also, I couldn't find the bootstrap function in the documentation for v ...

angular

What is the best way to attach a JSON string to an observableArray?

Inside my controller: public ActionResult RetrieveListOfCountries() { return Json(new {data = db.Country.ToList()},JsonRequestBehavior.AllowGet); } Within my Knockout view model: self.RetrieveListOfCountries = function () { $.getJSON("/Profil ...

javascriptjqueryhtmljsonknockout.js

Is it possible to modify the background color of a live bootstrap dropdown component?

Looking to jazz up your bootstrap navbar? Check out the code below and see how you can change the color (blue) when an item is clicked and active: https://i.sstatic.net/iPp1W.gif I've tried a bunch of different methods, but none seem to be working ...

htmlcssbootstrap-4nav

Enhancing User Experience: Use of Multiple Select Radio Buttons in Conjunction with Jquery UI Tabs and Mals

Whenever I select one radio button, I want all other radio buttons in each form with the same value to also change. I've been having trouble getting this functionality to work, so I created a JSFiddle for you to review here. Any assistance would be g ...

jqueryhtmljquery-ui

Having issues with jQuery Overlay functionality on Internet Explorer 8

Sorry if this question has already been addressed elsewhere, but I wasn't able to locate any information on it. I am currently using jQueryTools Overlay which is functioning properly in Chrome. However, I am encountering an issue in IE-8 where my ove ...

jqueryhtmlcssuser-interfaceoverlay