Can we specify the inherit value for font family on an element to ensure consistent style when the specified font is not available?

Suppose I have a page with the following HTML content: 

<body style="font-family:Helvetica">
    <span style="font-family:Segue">Hello World</span>
</body>

Would it be considered valid to set the font family of the span to Segue, inherit in order to have it inherit the parent's font if the first font specified is not available on the system?

<body style="font-family:Helvetica">
    <span style="font-family:Segue, inherit">Hello World</span>
</body>

Although it appears to function in the browser (Firefox), Firefox's own debugging tools indicate that it is not valid.

In essence, is it acceptable to use font-family: AnyFont, inherit?

Update:
It has been determined that using inherit does NOT work.

The question now becomes, how can a span inherit the font when the specified font is unavailable?

htmlcss

Answer №1

inherit stands alone as a property. By using inherit, the element will inherit the font-family of its parent, regardless of its own font-family declaration. This means that even if a font-family is specified for the span element, it will be ignored and the body's font-family will be inherited instead.

To achieve this, you can use the following code:

body {
   font-family: Helvetica;
}
span {
   font-family: Segue, Helvetica;
}

With this setup, the font will first attempt to use Segue, but if it is not available, it will fall back to Helvetica. Therefore, in the style declaration for the span element, list the fonts you want to fallback to, separated by commas.

Answer №2

Invalid. Only using the inherit keyword on its own is allowed in a property declaration.

Although the declaration is ignored, it may seem to work because font-family is inherited by default.

Without custom properties, an element cannot simply fall back to its parent's font stack without specifying the entire stack as fallbacks.

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

Unable to trigger jQuery onclick event on nested div elements

I'm experiencing an issue with my web-page where two buttons at the top are not responding to a sorting function on the nested #byFilter. Despite trying to apply the onclick(function()) method, it doesn't seem to work. Javascript $(document).re ...

javascriptjqueryhtmlcss

"Create a sleek slider with a modern Apple store aesthetic using Javascript

While I am willing to put in some effort, I am a bit lost at the moment. I am attempting to create a slider similar to the one featured on the home section of the Apple website. How can I enable a click on an image to navigate through slides? Alternatively ...

javascripthtmlcssios

I'm working on using CSS to design a layout similar to the one shown in the image below, experimenting with flexbox to achieve the

https://i.sstatic.net/4kNAd.png I am currently facing an issue with the layout of my navigation bar, as it is displaying in a column instead of a row like the format shown in the image. I have tried using flexbox and setting the display to inline-block in ...

htmlcssflexbox

Issue with Audio TAG functionality in Internet Explorer 9

I am facing an issue with my jQuery code that generates an audio tag. The code works perfectly in Firefox and Chrome, but it is not functioning properly in IE9. Here is the code snippet: $(document).ready(function () { var source = "/TTS.aspx?tts=" + ...

jqueryhtml

Is there a way to make a picture fill the entire background?

Is there a way to make pictures expand across an entire page with different resolutions? I'm trying to achieve this effect but unsure how. Take a look at my current example: . ...

javascripthtmlcssimage

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

htmlcsssvgresponsive

Triggering a jQuery click event to showcase the hidden content

I am attempting to replicate the functionality seen on the website. The issue I am facing is related to the event_content class. I want to display only a limited amount of content initially, and then hide the excess content. Upon clicking the plus class, ...

javascriptjqueryhtmlcss

What advantages does withStyles offer that surpasses makeStyles?

Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles? ...

cssreactjsmaterial-ui

Browsing through the last items on a webpage

I have set up a jsfiddle that explains itself quite well: http://jsfiddle.net/nt7xzxur/ with the following smooth scrolling code: function smoothScroll(hash) { $('html, body').animate({ scrollTop: $(hash).offset().top }, 750); By clicking o ...

javascriptjqueryhtmlcssscroll

Curved edges, Layering, Content overflow restriction

My design consists of two circular divs with the border-radius property set to its max value. The first circle contains a header div with a unique background-color and overflow:hidden to create the illusion that the top portion of the circle has a differen ...

overflowz-indexcsscss-position

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

cssjavafxfontsitalic

Express.js problem: Unable to load CSS and JS files from the 'public' directory

Currently, I am working on a web project with Express.js and encountering difficulties in loading CSS and JavaScript files from the 'public' folder. Despite following common practices, it seems that something is amiss. Here is the layout of my pr ...

javascripthtmlcssexpressweb

Newbie inquiry regarding the setup and utilization of Bootstrap

I'm currently working on building a website and I decided to incorporate a bootstrap carousel. Initially, I had a dropdown button in the navbar along with a collapsible menu for smaller viewports which were functioning properly. However, when I added ...

javascripthtmlbootstrap-4cdn

How can I pass the color hex value from the controller to the view without using quotation marks?

I'm having trouble sending a value and color pair using JSON. The color value needs to be returned to the JavaScript in the view as color: "#FFFFFF". I can send it to the view that way, but once the browser reads it, it turns into color: &quot;#FF ...

c#javascriptjsonhtmlasp.net-mvc-4

Execute an xmlhttprequest and then redirect to a different URL

I'm a beginner when it comes to AJAX and JavaScript. My goal is to first show a confirmation box, then send an XMLHttpRequest if confirmed. After that, I want to redirect the user to a new page. Below is my current code: <script type="text/javascr ...

phpjavascripthtmlxmlajax

Tips for speeding up your website by preloading versioned files in HTML

Tools like Google Lighthouse and PageSpeed recommend preloading important requests using <link rel=preload> to enhance website performance. When it comes to static files with unchanging filenames, the process is straightforward. However, how can I ...

htmlangularprimengpagespeedlighthouse

I'm currently facing difficulties trying to implement AJAX with JavaScript and PHP as the desired output is not being

My query is quite straightforward - why isn't the code functioning properly? I am attempting to have the text echoed in PHP displayed inside a div with the ID of "show". Interestingly, this works with a txt file but not with PHP or any other type of f ...

javascriptpythonphphtmlajax

The flex reverse-column child's text selection occurred in the incorrect direction

I am having an issue with selecting text in a flex container that is set to reverse column. The selection I make is incorrect because the browser tries to select from the end of the element, resulting in improper selection. For example, <div style=" ...

cssbrowserflexboxselectiontextselection

Is it possible to dynamically alter a CSS property using styled components when an onClick event occurs?

Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton: const SummonButton = styled.button` height: 50px; borde ...

javascriptcssreactjsrxjsstyled-components

Tips on containing text within a div box without exceeding its boundaries

I've been struggling with containing the text in my display area. No matter what I try, the text keeps overflowing and it's driving me crazy. I've researched various solutions like using word-wrap: break-word;, adjusting width manually, but ...

htmlcss