What steps do I need to take to make sure the Google font I downloaded is functioning properly in my React project

I have encountered an issue with using a Google font in my project...

After downloading the font, I included the following CSS code:

@font-face {
  font-family: "Work Sans";
  src: local("Work Sans"),
    url(../src/Fonts/Work_Sans/WorkSans-VariableFont_wght.ttf) format("truetype");
}

However, I received the error message below:

Failed to decode downloaded font: http://localhost:3000/src/Fonts/Work_Sans/static/WorkSans-Regular.ttf
localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135

Can anyone provide insight into what might be causing this error? Thank you for your help!

cssreactjsgoogle-fonts

Answer №1

I'm uncertain about the process of utilizing downloaded google fonts, but you have the option to import them directly in your HTML <Head> section within your index.html.

Below is the code that should be included in the head of your index.html

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=Roboto:wght@300&family=Work+Sans:ital,wght@0,300;0,400;0,600;0,700;1,100&display=swap" rel="stylesheet">

Alternatively, you can select your own styles and

  1. visit this link
  2. scroll to find the various styles available
  3. click on the + sign next to the desired styles
  4. select the "view selected families" button at the top right corner
  5. copy and paste the auto-generated code into the <Head> section of your index.html file

To implement the font in your CSS, use the following:

font-family: 'Work Sans', sans-serif;

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 could be causing the incorrect styling of the <h1> tag and certain Bootstrap elements in my Vuejs project when I import Buefy?

In my webpack-simple Vue.js project, I am utilizing Bootstrap 4 and Buefy. However, upon importing Buefy as per the documentation, I noticed that my <tag does not resize the text correctly and the nav-bar in Bootstrap 4 is displaying the wrong width. T ...

javascripthtmlcssvue.jsbuefy

There seems to be an issue with the CSS file linking properly within an Express application

Every time I run my app.js file, the index.html file is displayed. However, when I inspect the page, I notice that the CSS changes are not taking effect. Strangely, if I open the HTML file using a live server, the CSS changes are visible. Can someone exp ...

javascripthtmlcssnode.jsexpress

Is there a way to trigger a Modal to open upon clicking a custom-designed button in MaterialUI?

In my React and Material-UI project, I am attempting to trigger a Modal to open using a custom button. The button also performs other functions, which is why it's important for me to combine the "Modal Opening" action with these additional functionali ...

javascriptreactjsmaterial-ui

Using two body tags in the code of a Wordpress site can lead to malfunctioning

I've encountered a strange issue with my Wordpress sites hosted on BlueHost. There seems to be a double <head> tag appearing in the HTML code, even though there is only one. This duplicate tag is causing issues with the proper rendering of the s ...

phphtmlcsswordpresstags

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

javascriptcssanimationthree.js

Developing a feature that allows users to switch between different sets of information

I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: . At present, I have implemented two sets of price c ...

javascripthtmljquerycssvue.js

Utilizing TypeScript to spread properties onto a component and destructure them from within components

I'm trying to optimize my use of props spreading and destructuring when working with components. Currently, I spread my props in this manner: <RepositoryItem {...node} /> Then, within the component, I destructure the props like so: interface ...

reactjstypescript

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

javascriptjquerycsshtmlsticky

React TypeScript with ForwardRef feature is causing an error: Property 'ref' is not found in type 'IntrinsicAttributes'

After spending a considerable amount of time grappling with typings and forwardRefs in React and TypeScript, I am really hoping someone can help clarify things for me. I am currently working on a DataList component that consists of three main parts: A Co ...

javascriptreactjstypescriptreact-forwardref

Adding space between Bootstrap columns to align them one below the other on small devices

https://i.sstatic.net/turhY.png Within this illustration, there are two columns - one with the class col-sm-3 and the other with col-sm-8, situated in a single row. Upon resizing the window (as shown in the screenshot provided), the two columns appear ...

htmlcssbootstrap-4

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

jqueryhtmlcsstwitter-bootstrap

Error: Unable to Locate Module (Typescript with baseUrl Configuration)

Struggling to implement custom paths in my TypeScript project, I keep encountering the "webpackMissingModule" error due to webpack not recognizing my modules. I've attempted various solutions without any success. Any suggestions or ideas? Some packa ...

reactjstypescriptwebpackmodule

Changing the className of buttons based on user interaction

I'm looking to create a function in React JS that changes the button's color when clicked. Specifically, I want the color of the button to change upon clicking. I have attempted to achieve this using the following code: {"classname" i ...

javascriptreactjs

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

After successfully completing the HTML and CSS part, I hit a roadblock with JavaScript. I'm struggling to figure out how to create a button that can toggle the visibility of text when clicked. An error message keeps popping up in the console stating ...

javascripthtmlcssbutton

Performance issues with jquery addClass and removeClass functions observed in Internet Explorer 11

I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particu ...

javascriptjquerycssfrontend

python selenium style attribute for element

There is a snippet of HTML that resembles this: <a class="" data-style-name="Black" data-style-id="16360" "true" data-description="null"<img width="32" height="32" I am trying to extract the text "Black" from it and then click on it. However, there ...

pythonhtmlcssselenium

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

javascripthtmlcss

With the implementation of BrowserRouter v6, the webpage fails to display without any error messages detected

import './App.css'; import {BrowserRouter , Route, Routes} from "react-router-dom" function App() { return( <> <BrowserRouter> <Navbar/> <Routes> <Title/> <About/> <SkillsSection/> ...

reactjs

Retrieving and showcasing precise data from an onClick event on one page to another in React

Currently, I am engrossed in a react project where my aim is to extract particular data from a clicked button/profile and then showcase it on another page. Here's what I have so far. A list of profiles belonging to various celebrities are being displ ...

jsonreactjsgetdisplay

What is the best way to save files on a web hosting platform?

Hey everyone, I hope you're all having a good evening. Recently, I developed a React Application that allows users to upload and store images both locally and on MongoDB along with some additional data. During local development, everything was working ...

reactjsmongodbexpressservermulter