What causes CSS to default to Times New Roman for fontFamily when the specified font cannot be located?

I am working on a app where the body has a fontFamily set to 'brandon-grotesque'. I am using a theme provider with Material UI and <Typography>. If a font specified in themeprovider does not exist, or if there is a typo like 'brandon-grotesk' used within components inside the <body> tag, I want the fontFamily to fallback to 'brandon-grotesque' instead of defaulting to Times New Roman. How can I achieve this?

In addition, regardless of what font is defined in the fontFamily property, it should only default to Times New Roman if none of the imported fonts are available.

<body style={{ fontFamily: 'brandon-grotesque' }}>
     <Main />
     <NextScript />
</body>

I also considered trying font-family: 'my-font', inherit, but that is not valid CSS syntax.

cssfonts

Answer №1

Each web browser has its own method for determining which fonts to use if the specified font is not available on the user's operating system.

For more information on specifying font families in CSS, you can refer to resources such as the CSS Fonts Module Level 3 specification, W3 Schools, or Mozilla Developer Network. The font-family property accepts a list of font names separated by commas.

(Using curly braces may be appropriate in React, but it's not recommended for traditional CSS styling.)

<body style="font-family: 'Brandon Grotesque', 'Brandon Grotesk'">

Additionally, make sure to specify the actual font family name (e.g., "Brandon Grotesque") rather than the file name when setting the font-family.

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

Utilizing Javascript and CSS for horizontal alignment from left to right

I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...

javascriptcss

Smoothly scroll down to the bottom of the page with a jQuery button using the anchor

Recently, I've been working on setting up a navbar with buttons that smoothly scroll down to specific sections when clicked. However, as a beginner in jquery, I'm having some trouble figuring out how to make it work seamlessly. Can anyone guide ...

jqueryhtmlcss

What is the best way to ensure that the scroll inside a container automatically starts at a specific link?

https://codepen.io/jimjamjom/pen/oBoEgz If you check out the codepen link above, you'll see that when a visitor lands on the page, the container defaults to "Section 3," requiring them to scroll up or down to view the other sections. Despite attempt ...

javascripthtmlcss

Mobile devices not showing the Navbar bootstrap menu

My header.php works perfectly on desktop, but the navigation bar is not displaying properly on mobile devices. Here is my code: <!DOCTYPE html> <html> <head> <title>International Pvt. Ltd.</title> <meta name="viewpo ...

phpcsstwitter-bootstrap-3menunav

What is causing the section to cover the navbar?

My content is overlapping the navbar on certain screen sizes, and I'm not sure why. Any ideas on how to fix this issue? Would wrapping everything in a container help? Currently using bootstrap v5.3.0-alpha1. Additionally, when I have a collapsed nav ...

htmlcsstwitter-bootstrapbootstrap-5

The container's :before pseudo-element features a sleek white border

I have been experimenting with using the :before and :after pseudo-elements to generate diagonal lines within a container. However, I am encountering an issue where these pseudo-elements appear to have a white bottom border, and I am unable to determine t ...

htmlcsslineselementdiagonal

Utilizing Media Queries with Dynamic Vue Properties

On one of my website pages, I always have a Div element with a Background Image that changes based on Media Queries (for example, I fetch a smaller resolution from my CDN on mobile phones). However, since I retrieve the Image URL on Page Load, I need to s ...

javascriptcssvue.jsvuejs2

Which is better: Starting with rows or columns in Bootstrap 4 layout design?

Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...

htmlcssbootstrap-4

Avoiding a line break between two <form> tags is essential for maintaining the structure of your webpage

I am looking for a way to ensure that there are no line breaks between two forms that I have on my website. Here is the code snippet: <form action="..."> <input type="submit" /> </form> LINE BREAK HERE <form action="..."> <inpu ...

htmlcss

disobedient divs

I have noticed that elements on my page are breaking out of the "wrapper" div. Here is the HTML structure I am using: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" conten ...

htmlcss

Is the overlap of viewport unit VW less than 100 vw per viewport?

So if I am correct, 1vw represents 1/100th of the width of a viewport, meaning there are 100vw across any given viewport. But here's an interesting scenario - when I have two divs each with a width of 25vw, one positioned 25vw from the right edge and ...

csshtmlviewport-units

I would like to create a fixed-position menu similar to Slashdot's comment filtration menu. How can I achieve this?

Have you ever noticed that Slashdot has a cool little feature that lets you adjust your comment threshold to filter out down-modded comments? When you scroll to the top of the page, it stays in one place, but as you continue scrolling down, it eventually s ...

javascriptcss

use css to align multiple div elements

I am struggling to line up more than five div tags on the same line. Here is my CSS: <style> #yes { float: left; width: 18%; margin:1px; } </style> Example of HTML code: echo '<div id="yes">'.'<b>'.'Job T ...

htmlcss

Fluid container with two columns using Bootstrap 3's container layout

I am currently working on designing a container with a two-column layout using the container-fluid class for background color and image requirements. Inside this container, I have included a container class to ensure that the content aligns properly with n ...

htmlcsstwitter-bootstrap-3

Switch the background image in a table data cell using ngIf in Angular

Can you help me with this: I have a td in a table with a background image applied <td background="assets/images/crew/sign.jpg" style="background-repeat: no-repeat; background-size: contain; background-position: center center"> W ...

cssangularhttp

Foundation framework enables the creation of a full width footer that stands out

I'm having trouble getting my footer panel to stretch across the entire page, it seems stuck in the center. The header at the top of the page spans the full width just fine. Am I missing something? My goal is to make both panels at the bottom of the p ...

htmlcsszurb-foundation

What is causing the property to overflow when the tooltip is positioned absolutely there?

While browsing, I stumbled upon this "TryIt" link: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip However, I found myself puzzled by... I understand the purpose of position:absolute;, but what confused me was why it wasn't displaying ...

css

The Bootstrap div is failing to resize proportionately

Although frontend development is not my expertise, I find myself needing to make adjustments to a Bootstrap-based website. I have been tweaking the heights of a specific div that is defined as follows: html: <div class="cover-container d-flex w-100 h- ...

htmlcsstwitter-bootstrapbootstrap-4

Implementing a Timer on an HTML Page with JavaScript

I am looking to add a timer to my HTML page using JavaScript. The timer should get the selected date and time from an input field <input type="date" /> and control it. If the time difference between the current time and the selected time is less than ...

javascriptjqueryhtmlcsstimer

html5 - Safari browser: Hover effects for rounded images

Encountering an issue on my website with a video link here. The problem is specific to Safari. Below is the HTML code: <div class="item"> <div class="img-wrapper"> <img class='img'> </div> </div> An ...

htmlcsssafari