Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is font-family -apple-system?
The -apple-system value of the CSS font-family property allows developers to use the same font that the Apple operating system uses. This ensures that your web content appears with fonts that match the user's device preferences on Apple devices like Mac, iPhone, and iPad.
Syntax
font-family: -apple-system;
The font-family property accepts multiple font names as fallback values. If the browser doesn't support the first font, it tries the next one in the list.
font-family: -apple-system, fallback-font1, fallback-font2;
Example 1: Basic Usage
The following example demonstrates how to apply the -apple-system font family to text content
<!DOCTYPE html>
<html>
<head>
<style>
.apple-text {
font-size: 1.6rem;
font-family: -apple-system;
color: blue;
padding: 20px;
}
</style>
</head>
<body>
<h2>Using <i>-apple-system</i> font family</h2>
<p class="apple-text">Welcome to TutorialsPoint!</p>
</body>
</html>
Text appears using the system font of Apple devices. On non-Apple devices, the browser will use its default font.
Example 2: With Fallback Fonts
This example shows a complete font stack with -apple-system and multiple fallback options for better cross-platform compatibility
<!DOCTYPE html>
<html>
<head>
<style>
.cross-platform-text {
font-size: 1.6rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: green;
padding: 20px;
line-height: 1.5;
}
</style>
</head>
<body>
<h2>Cross-platform system fonts</h2>
<p class="cross-platform-text">This text uses system fonts optimized for each platform: Apple devices, Windows, and Android.</p>
</body>
</html>
Text renders with the native system font for each platform: San Francisco on macOS/iOS, Segoe UI on Windows, and Roboto on Android devices.
Browser Support
The -apple-system font family is supported by:
| Browser | Support |
|---|---|
| Safari (macOS/iOS) | Full support |
| Chrome (macOS) | Limited support |
| Firefox | Full support |
| Edge/Chrome (Windows) | Uses fallback fonts |
Conclusion
The -apple-system font family provides native Apple system fonts for optimal readability on Apple devices. Always include fallback fonts to ensure consistent appearance across all platforms and browsers.
3K+ Views
