What is font-family -apple-system?
What is font-family -apple-system?
In CSS, the “font-family” property is used to set the font of the text content of an HTML element. It takes multiple font names as values. If the browser does not support the first font, it sets the next font style of the HTML element.
Users can use the “font-family” CSS property with the following syntax.
font-family: value1, value2, value3, ...
The “-apple-system” value of the “font-family” CSS property allows developers to set the same fonts for the HTML content of a web page as for Apple’s operating system. This means we can set the font to match the user’s device preferences.
Syntax
Users can use the “font-family” CSS property with the “-apple-system” font using the following syntax.
font-family: -apple-system;
Example 1
In the example below, we’ve set the “-apple-system” font family for the text content of an HTML element. If you’re using an Apple device, you’ll notice that it sets the font to the same specifications as your device.
<html>
<head>
<style>
.text {
font-size: 1.6rem;
font-family: -apple-system;
color: blue;
}
</style>
</head>
<body>
<h2>Use the <i> -apple-system </i> font to set the font size based on your Apple device's font size</h2>
<p class="text">Welcome to TutorialsPoint! </p>
</body>
Example 2
In the following example, we add “BlinkMacSystemFont” as a fallback as the second value of the font-family. Here, the “-apple-system” value is used for Firefox and Opera browsers, and “BlinkMacSystemFont” is supported by Chrome browsers. We also use a few other fonts as fallback values. Therefore, “font-family” selects the next font until a font is found that is supported by a specific browser.
<html>
<head>
<style>
.text {
font-size: 1.6rem;
font-family: -apple-system, BlinkMacSystemFont, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: green;
}
</style>
</head>
<body>
<h2>Set fonts based on Apple device fonts using the <i> -apple-system </i> font family</h2>
<p class="text">Hey! How are you? </p>
</body>
</html>
Users are taught to use the “-apple-system” font family for Apple devices to set the font based on the user’s device preferences. Additionally, a fallback font is set in case the browser can’t find the device’s font.