Having trouble with Google font displaying on React site but not on mobile devices?

After importing a Google font that appears perfectly on desktop and cross-browser, an issue arises on mobile where default fonts are shown instead.

Below is a snippet from my App.css file:

@import url("https://fonts.googleapis.com/css2?family=Turret+Road:wght@3000&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Turret Road" !important;
  font-weight: 3000;
  font-style: normal;
}

Despite searching for solutions, the remedies found do not seem to be compatible with React. Any suggestions on how to resolve this issue?

javascripthtmlcssreactjs

Answer №1

Modify the ':wght@3000' to '300' and include the word cursive before the important tag for proper display.

font-family: 'Turret Road', cursive !important;

Answer №2

If you're struggling with font styling on your website, try switching your developer tools to mobile mode and inspecting the text that seems off.

For a step-by-step guide, check out this dev-tools style resource.

Once you're in the computed tab, focus on the font-family section. Here, you can identify conflicting styles and easily determine which one is taking precedence. By adjusting your CSS specificity or removing conflicting styles, you can achieve the desired font styling on your website.

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

Establishing the development environment

As a recent Computer Science graduate, I am currently employed at a startup where I have been assigned the task of integrating new features into purchased software. The software was obtained from AWS and my initial attempts to work on it have been challeng ...

reactjsnpmwebpackdevelopment-environment

Discovering when the DOM has finished rendering in AngularJS with ng-repeat

I am looking for a way to trigger an alert or message upon completion of rendering in my HTML DOM using AngularJS, specifically when dealing with multiple ng-repeats. HTML Code: <body> <div ng-controller="Ctrl"> <div ng-repeat= ...

javascriptjqueryangularjshtml

I'm having issues with getting Next.js i18n routing to function properly on dynamic routes

I am currently working on a Next app with only two routes: an index.tsx and a [slug].tsx. The slug route utilizes getStaticProps and getStaticPaths to retrieve the page content from a CMS. To enable internationalized routing, I have included the following ...

reactjsnext.js

what distinguishes CSS properties for Id versus class selectors

Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...

css

Displaying the Polymer Paper spinner when the page is still loading

How can I make the polymer paper spinner display while the body tag is set to unresolved? I'm experiencing a brief blank screen before the page finishes loading. I'm feeling lost and unsure of how to begin. Check out the Polymer Project documen ...

jqueryhtmlpolymer

Is there a way to narrow down Drive API list results based on a specific domain that has write permission?

I am currently working on retrieving a list of files from the drive API using a service account, with permissions granted to a specific domain for editing. While I have successfully implemented this feature for individual emails, I am facing a challenge in ...

javascriptnode.jsgoogle-apigoogle-drive-api

The error message "Error: 'x' is not a defined function or its output is not iterable"

While experimenting, I accidentally discovered that the following code snippet causes an error in V8 (Chrome, Node.js, etc): for (let val of Symbol()) { /*...*/ } TypeError: Symbol is not a function or its return value is not iterable I also found out ...

javascriptnode.jsgoogle-chromev8for-of-loop

Trouble with triggering events from Datatable buttons

Below is the code snippet I am currently using for my DataTable : var oTable12= $('#example').DataTable({ "aaData": tableData, "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]], "iDisplayLength": 5, "aoColumnDefs ...

javascriptjquerydatatable

Troubleshooting the issue of Bootstrap 4 scrollspy failing to update active navbar items

I have been working on a Bootstrap 4.0 landing page and trying to implement ScrollSpy without success. The active menu items are not changing as expected. Here is the code snippet from index.html: <body> <!-- Navbar --> <nav id="main-nav" ...

jqueryhtmltwitter-bootstrapbootstrap-4scrollspy

How can a full-screen background image be created in Next.js?

To achieve a full height display in both the html and body tags, how can we do this within a next.js component? Check out [1]: https://i.stack.imgur.com/K1r9l.png [2] Visit: https://www.w3schools.com/howto/howto_css_full_page.asp "mainImage.jsx" import ...

htmlcssreactjsnext.js

What is the best way to evenly distribute 5 items in a row using material-ui's grid system?

I am trying to evenly put 5 items in a row using a grid system with 12 columns. The value of 2.4 doesn't seem to work for me. Any suggestions on how I can achieve this? Thanks in advance :) Here is the code I have so far: <Grid container spac ...

reactjsmaterial-ui

Tips for running a JavaScript function from a controller in a Rails application

I am looking for a way to upload an image and display it without refreshing the page. One method I am familiar with involves using a hidden iframe and setting the form target to it. Then, I would return a piece of JavaScript from the controller that call ...

javascriptjqueryruby-on-railsajax

Utilize Electron's fs to stream a file directly to an HTML video player while it is being downloaded

I am currently exploring the possibility of using the HTML video player to stream a file from the file system within Electron. My goal is to initiate streaming while the file is still being downloaded. I am uncertain whether my current approach will be ...

javascriptnode.jsvideo-streamingelectronnode.js-stream

Utilizing AngularJS and RequireJS for intricate routing within web applications

I have encountered an issue with nested routings that I am struggling to resolve. The technologies I am using include: AngularJS, RequireJS; AngularAMD, Angular Route. To start off, here is my main routing setup: app.config(function($routeProvider, $loc ...

javascriptangularjsroutesrequirejsangular-amd

Converting a single-column table into an array

After reading through numerous posts related to my query, I have yet to find a solution to my problem. Utilizing PHP and MySQLi, I am attempting to extract data from my server. Within my database, I have a single-column table and my aim is to store this ...

phphtmlmysqlarraysmysqli

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

htmlgoogle-chromecross-browser

Progressively Loading Linear DataGrid Cells in Material-UI

I am trying to include a new column called Filled Quantity in my table. After going through the documentation, I am unsure how to achieve this. It seems like I might need to use renderCell while setting up the column, but I am not sure how to go about it. ...

reactjsmaterial-ui

Retrieve a single element from an array using async waterfall in Node.js and MongoDB

I am working on creating a child and parent category menu using nodejs, mongodb, and angularjs. I am encountering an issue where the array being returned in the callback only contains a single record, despite having multiple data entries. I am unsure of wh ...

javascriptangularjsnode.jsmongodbasynchronous

Exploring React hooks: using setter function in cleanup process

My goal is to gain a deeper understanding of the React hooks life cycle, particularly focusing on minimizing re-rendering. To start off, I decided to create a simple component that displays the current time. The initial code snippet below functions perfect ...

reactjsreact-hooks

NextJS implementation of an Infinite Loading Spinner using CldUploadWidget

Trying to utilize the CldUploadWidget from the next-cloudinary package in a Next.js application with the app router has been challenging. I've developed an ImageUpload component that showcases the selected or fetched image from Cloudinary and includes ...

reactjsnext.js13cloudinary