Are font classifications determined by the operating system of the viewer or the web browser of the viewer

One thing I've observed is that Google Fonts never uses "fantasy" as a fallback class in the font-family. Instead, they utilize "cursive" for all script and typical fantasy fonts.

Could this be a subtle indication that Chrome does not support "fantasy" as a fallback class? If so, would the browser handle fallback font-classes through implemented lists for standard serif, sans-serif, etc. fonts? Alternatively, could the browser query the operating system for such listings?

What exactly occurs when the browser needs to fall back to a serif font on the client's system? How does it gather information about the installed serif fonts?

I've searched high and low for answers to these questions, so hopefully someone here might have some insight. Although web-safe fonts may soon become obsolete, they still hold some significance.

cssbrowserfontsgoogle-font-apifallback

Answer №1

Fonts are not directly linked to specific font families in an automatic way. They are simply grouped under certain family names and listed on platforms like Google Fonts and Adobe Typekit.

You can create a font stack that includes a sans-serif family, a serif family, and concludes with the fantasy keyword:

font-family: Helvetica, 'Times New Roman', fantasy;

Browsers will handle this by using the first supported family in the list, falling back to generic family if necessary.

It is expected that all browsers support at least the five generic font families outlined in CSS2.1 and css-fonts-3: serif, sans-serif, cursive, fantasy, and monospace. However, the exact mapping of fonts to these categories may vary between browsers as users have the option to customize their preferred default fonts for each category.

The default font preferences in browsers are based on assumptions about commonly installed fonts on different systems.

I cannot explain why Google Fonts does not include fantasy in any of its font stacks.

Answer №2

Here is a demonstration I have created for testing purposes:

http://codepen.io/jaycrisp/pen/NxOrOy

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

Upon viewing the test in Chrome on Mac, it is evident that the fantasy keyword is supported. The fonts displayed are consistent across Safari and Chrome browsers.

The fantasy font appears as papyrus, which seems to be a default font within the Mac OS system. This font also displays consistently on Firefox and Safari browsers.

It is speculated that Google Fonts opts for the use of cursive instead of fantasy because choosing fantasy could dramatically alter the intended look of a website design. Substituting fantasy with a font like papyrus would completely change the aesthetic. However, it should be noted that using Papyrus may not be ideal for website design regardless.

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 is the best way to ensure the image and card maintain the same size ratio in React Bootstrap?

One of the challenges I encountered involved a vertically aligned card group containing a card with an image: https://i.stack.imgur.com/w9Jkf.jpg This is the React code snippet that was causing the issue: import React from 'react'; import { ...

cssreactjsbootstrap-4

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

javascriptcssreactjsmaterial-uireact-router

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

I have recently learned about a rotate transform that allows for rotating around a specified center point using the `rotate(angle, centerX, centerY)` method. However, I have noticed that this method does not seem to work when applied via CSS. Interestingl ...

htmlcsssvg

Eliminate the gaps within CSS3 columns

I'm attempting to achieve an effect that looks like: C---------------------------------------) | Address 1 | Phone Numbers | | Address 2 | Times place is open | (---------------------------------------) However, the spacing with th ...

htmlcss

Changing the border color of a Bootstrap 5 button using custom CSS styling

I have been working on a page to control my amp using various JavaScript libraries. 1.) How can I change the blue border of a selected Bootstrap 5 button to a lighter green without using SCSS? Example: Repository (apologies for the mess, it's not t ...

cssbootstrap-5

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Here is a cool typing text effect created using HTML, CSS, and JavaScript. Check out the code below: (function($) { var s, spanizeLetters = { settings: { letters: $('.js-spanize'), }, init: function() { ...

javascripthtmlcss

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

What is the best way to overlay elements with a gray background?

Here is a snapshot of the local web page: [defective image deleted] This is what the deployed webpage looks like on Vercel: https://i.sstatic.net/NJJJp.png The issue is that the gray div is revealing its underlying elements. .zoombackground { ba ...

htmlcssreactjs

Eliminate any additional margin and padding on the floating div

Problem : The code mentioned below is causing extra vertical padding in IE7 between the two rows of divs with images. I've exhausted numerous attempts to fix it without success. Your assistance on this matter would be greatly appreciated. The code fun ...

htmlcss

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

htmlcss

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...

javascriptjquerycssjquery-uijquery-effects

Testimonials paired with captivating visuals

I am interested in featuring a rotating selection of testimonials on my homepage. I would like to display only one testimonial at a time, with the content randomized upon each page refresh. My vision is for each testimonial to include a quote, the author& ...

jqueryhtmlcsswordpress

Positioning divs around a circle can be quite challenging

Among my collection of divs with various classes and multiple child divs representing guests at a table, each main div symbolizes a specific restaurant table type. I have created a jsfiddle for demonstration. http://jsfiddle.net/rkqBD/ In the provided ex ...

javascriptjquerycsshtml

How can I align the logo in the center of a ul

Many have attempted to resolve this issue, creating makeshift solutions or simply settling for an outcome that just "gets by." But what is the optimal approach? I have nearly finished something, yet for some reason, the logo isn't centered, rather the ...

htmlcssnavigation

Populate the containing div with an image element

I am looking to fill a parent div with an img, but I want the image to be a standalone img element inside the div, rather than setting it as a background property. To clarify, instead of this: div { background-image: url('someimg.jpg'); ...

htmlcss

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

I am looking to customize the font size of \section and \subsection in doxygen's html output. Additionally, I want to include numbering for the sections and sub(sub)sections in the format: 1 Section1 1.1 Subsection1.1 1.1.1 Subsubsection ...

cssformattingdoxygen

Having trouble implementing table row selection with semantic-ui table

I am currently in the process of adopting Semantic-UI, but I am encountering some issues. Specifically, I am struggling to make row selection work in a table. Below is the sample HTML I am using from Semantic-UI: <table class="ui selectable celled tab ...

javascripthtmlcsssemantic-ui

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

I am facing an issue with a search filter functionality. When all filters are selected and then deselected individually or together, the "all" button remains selected. I need help in ensuring that when any filter is deselected, the "all" button also gets d ...

javascriptjquerycsshtml

Clicking will cause my background content to blur

Is there a way to implement a menu button that, when clicked, reveals a menu with blurred content in the background? And when clicked again, the content returns to normal? Here's the current HTML structure: <div class="menu"> <div class=" ...

javascriptjqueryhtmlcss

An SVG with a single enigmatic path/shape featuring a perplexing left margin or empty space. Not contained within an

I created a unique shape in Illustrator and adjusted the artboard to fit the shape perfectly, eliminating any excess white space. I double-checked this process to ensure accuracy. Upon opening the design in Chrome and inspecting it, I noticed that when ho ...

csssvg