What is the proper way to define the font slant as "slnt" in NextJS development?

My preference is to use the font style slnt -8 for Inter.

When importing with a URL through SCSS, I am able to specify slnt -8 as follows:

@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-8,100..900&display=swap");

Unfortunately, when using next/font/google provided by NextJS, it does not allow for specifying the slant of the font.

I prefer to use next/font since it self-hosts the Google-provided fonts. However, just italicizing the font leans too much for my liking.

I have attempted to specify the slant during import in different ways: 

const inter = Inter({ subsets: ["latin"], style: ["normal", { slant: -8 }]});
or 
const inter = Inter({ subsets: ["latin"], style: ["normal", "slnt:-8"]});
or 
const inter = Inter({ subsets: ["latin"], style: ["normal"]}, slant: "-8");

However, all of these approaches either result in TypeScript errors or fail to load properly.

javascriptnext.jsfontsgoogle-fonts

Answer №1

To achieve the desired slant (-8) for the Inter font when utilizing next/font, customizing it through CSS or JavaScript directly is usually necessary. While next/font streamlines the font loading process, it may not have built-in support for all functionalities offered by Google Fonts' API parameters, such as slant adjustments.

Here's a suggested approach:

CSS Import Technique:

If you prefer using next/font to host the font and require a specific slant (-8), you can still accomplish this by importing and applying styles directly in your CSS code. Here's how you can do it:

/* styles/globals.css */

/* Import Inter font with specified slant */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;  /* Adjust weight accordingly */
  font-stretch: normal;
  font-display: swap;
  src: local('Inter Regular'), local('Inter-Regular'),
       url('/fonts/inter-regular.woff2') format('woff2');
  font-named-instance: 'Regular';  /* Optional: specify named instance */
  font-variation-settings: 'slnt' -8;  /* Define the slant here */
}

In this demonstration:

Replace /fonts/inter-regular.woff2 with the correct file path to your Inter font hosted by next/font. Modify font-weight, font-style, and font-variation-settings based on the required font weights and slant adjustments.

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 it possible to utilize arrow functions in Vue while using style binding?

As I venture into the world of Vue JS HTML templates, I am exploring how to bind styles using arrow functions. My goal is to toggle the visibility of a div that originates from the Vuex store. Below is my current attempt at achieving this. The main_activi ...

javascripthtmlcssvue.jsvuejs2

How can I dynamically update the URL parameter based on the selected option in a dropdown list?

There is a single select option box with three options. When a user selects an option, the corresponding value should be appended to the URL (e.g., value=needbyDate). If another option is selected later, the previous value in the URL should be replaced w ...

javascriptjquery

Performing an AJAX request to a form within a CSS modal

Greetings from France, and please excuse any language errors in my English. I am currently coding in Symfony 3 and have an entity called "book" which can have different attributes (client, student, organizer, and/or speaker) based on the selected "type" a ...

javascriptjqueryajaxformssymfony-forms

When the key code is equal to "enter" (13), the form will be submitted

When I press the Enter key, I want to submit a form if there are no error messages present. Here is the function I have created: $(targetFormID).submit(function (e) { var errorMessage = getErrorMessage(targetDiv); if (e.keyCode == 13 && errorMessa ...

javascriptjquerykeycode

Achieving the resolution of a Promise amidst the failure of a separate promise

I need to handle a situation where a promise is resolved regardless of the success or failure of an ajax call. I attempted to use the following code snippet: new Promise(function(resolve, reject) { $.ajax({ url: "nonExistentURL", headers: { ...

javascriptjqueryajaxpromise

Issue with Angular's ngOnChanges Lifecycle Hook Preventing Function ExecutionWhen attempting to run a function within Angular's ngOn

In the midst of my evaluation process to ensure that specific values are properly transmitted from one component to another using Angular's custom Output() and EventEmitter(), I am encountering some issues. These values are being sent from the view of ...

javascriptangularlifecycleeventemitter

Switching the angularjs variable from html; a definitive guide

How can I update a variable in an AngularJS controller using JavaScript when a specific HTML element is clicked? For instance: angular.module('app',[]) .controller('appController', function($scope, $http){ $scope.on ...

javascripthtmlangularjs

Invoking controller from a view using a JavaScript function in CakePHP 1.3

I am working with a map in Javascript and I need to select a rectangular zone on my Google Map without clicking anywhere. Once I have the two corner coordinates, I want to send them to my CakePHP Controller. Can anyone help me figure out how to do this? H ...

javascriptphpajaxcakephpcakephp-1.3

Promises.all fails to reach the catch block after the initial rejection

I'm completely new to promises and I'm learning how to save multiple items to a MongoDB database system. When dealing with a single item, I have a function that utilizes promises. It returns a promise that either rejects if the database save ope ...

javascriptmongodbpromise

Tips for postponing or pausing the fetching process before loading mockServiceWorker.js during page reload

Currently, I am in the process of building a front-end application using Next.js. For API fetching, I am relying on RTK Query and utilizing MSW for mocking. An issue arises when the page is reloaded from the browser - if mockServiceWorker.js is not loaded ...

reactjsnext.jsrtk-querymsw

Experiencing issues calling a function in Vue.js while working with the SDK JavaScript?

When attempting to integrate the JavaScript SDK into Vuejs by utilizing a Facebook login button, I encountered an issue: <template> <div> <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" d ...

javascriptvue.jssdk

Unlock the potential of AngularJS services with this innovative design strategy

I am currently developing an AngularJS client application that will communicate with a REST server. To handle the interaction between the client and server, I have decided to use the $resource abstraction from AngularJS. Each resource is being written as ...

javascriptrestangularjsangularjs-service

AngularJS secureHTML verify image click event

Just starting out with AngularJS and hoping for some assistance :) I have a div that has the details of an activity, formatted in HTML. To display this content correctly, I am using trustAsHTML: <div class="description-div"> <div ng-bind-htm ...

javascriptangularjsionic-framework

What is the method for including preset text within a search bar?

My current issue is as follows: When the searchbox is focused, it appears like this: -------------------- -------------------- Upon exiting the searchbox, a string will automatically be added to it: -------------------- Search -------------------- I a ...

javascripthtmlsearchsearchbar

Issue with authentication when accessing Google Video API

I'm attempting to utilize the Google API provided: I have downloaded the Sample Project and followed these steps: 1) Navigate to the Project Folder named API Video 2) Run npm install 3) Set GCLOUD_PROJECT = neorisvideo 4) Download Json from the C ...

javascriptnode.js

What is the process for invoking a JavaScript function and storing form data in a text file within an HTML document?

My HTML code is here..... <!DOCTYPE html> <html> <title>Plot</title> <head> <script type="text/javascript" src="d3.min.js"></script> <script> function filter() { var choice = document.ge ...

javascripthtml

What could be causing the issue with HTML not being printed upon button click in ReactJS?

My goal is to display the word "Hello" on the screen when the add button is clicked. However, I am encountering an issue where it is not showing up. Any insights or solutions would be greatly appreciated! import React, { Component } from 'react'; ...

javascripthtmlreactjs

Ways to ensure that a function operates independently for each cloned div and not the original

I'm facing an issue where a jquery function needs to be executed when the drop-down is changed. However, the problem arises when I clone the div element and make changes in the drop-down of the newly cloned element, the effect takes place in the first ...

javascriptjqueryclone

Is there a way to arrange an HTML list in this specific manner using CSS or JavaScript?

I need to arrange a list of items in columns with 5 rows each, as shown in the attached image. This list is generated dynamically using an SQL query with a loop on the li tag. I am looking for a solution to order the list in this way using javascript or ...

javascriptcsshtml-lists

Display input field in AngularJS when radio button is selected

My JavaScript array looks like this: $scope.quantityMachines = [ { 'snippet' : 'One' }, { 'snippet' : 'Two' }, { 'snippet' : 'Three or more', 'extraField' : true }, { ' ...

javascripthtmlangularjsng-show