Open In App

What is font-family -apple-system ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to implement CSS property “-apple-system” while using multiple values for the font family.

The font-family is a CSS property that specifies a list of one or more font family names for the selected element. As a “fallback” system, the font-family property is able to hold several font names. If in case your browser does not support the first font, it tries the next ones passed in as values.

The font-family names can be further categorized.

  • family-name: It is the name of the font family. Example, cursive, “Courier New” etc.
  • generic-family: It is a name given to font families that are written after the family name to let the browser pick a similar font from them, in case the specified fonts are not available.

 

Syntax: 

selector {
     font-family: 'Courier New', Courier, monospace;
} 

Approach: Font names containing whitespaces must be enclosed within quotes. Global values for font-family are inherited, initial, revert and unset.  Apple’s fonts generally cannot be used on any webpage and are provided in-build in Apple’s product. We can use these fonts on our webpage through CSS. The comparison is shown in the second example by taking two headings with different classes as “one” or “two”.

Example 1: The below example shows the “font-family: -apple-system

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        * {
            box-sizing: border-box;
        }
  
        body {
            margin: 0;
            padding: 0;
        }
  
        h2 {
            height: 5rem;
            width: 15rem;
            background-color: green;
            color: white;
            margin: auto;
            text-align: center;
            margin-top: 2rem;
            font-family: -apple-system, -apple-system, 
                BlinkMacSystemFont, 'Segoe UI', Roboto, 
                Oxygen, Ubuntu, Cantarell, 'Open Sans', 
                'Helvetica Neue', sans-serif;
        }
    </style>
</head>
  
<body>
    <h2>
        GeeksforGeeks
        <br> -apple-system
    </h2>
</body>
  
</html>


Output: 

apple font

Example 2: The below example shows the comparison of “font-family: -apple-system”.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        * {
            box-sizing: border-box;
        }
  
        body {
            margin: 0;
        }
  
        h3 {
            height: 2rem;
            background-color: green;
            color: white;
            padding-left: 1rem;
        }
  
        .one {
            font-family: -apple-system, -apple-system,
                BlinkMacSystemFont, 'Segoe UI', Roboto, 
                Oxygen, Ubuntu, Cantarell, 'Open Sans',
                'Helvetica Neue', sans-serif;
        }
  
        .two {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
  
<body>
    <h3 class=".one">
        -apple-system
    </h3>
    <h3 class=".two">
        Courier New
    </h3>
</body>
  
</html>


Output: 

apple font

Note: Internet Explorer and Firefox use “-apple-system;as font-family whereas Google Chrome uses  “BlinkMacSystemFont



Last Updated : 29 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads