The Human eyes can easily read the newly designed Apple San Francisco font on the web page according to the study of the developer and users. The CSS property can prohibit the usage of Apple's font on any website. Any web content can use the new San Francisco font, and Apple's products come with these pre-installed font types for the user.
Mr. Craig Hockenberry details the font handling procedure on your website using CSS. The CSS code implements Apple's font type with different styles for the font-family attribute.
Syntax
Utilize the syntax below to apply Apple's latest San Francisco typeface to the element.
element{
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
Description:
- Firefox and Internet Explorer use the Apple system, while BlinkMacSystemFont is used by Chrome.
- You can download the San Francisco font from the link for system usage. You must install each version one at a time after downloading.
- Link: https://github.com/supermarin/YosemiteSanFranciscoFont
Other available Variants:
The following variants are used for the Apple font using CSS.
- font-family: -apple-system-body
- font-family: -apple-system-headline
- font-family: -apple-system-subheadline
- font-family: -apple-system-caption1
- font-family: -apple-system-caption2
- font-family: -apple-system-footnote
- font-family: -apple-system-short-body
- font-family: -apple-system-short-headline
- font-family: -apple-system-short-subheadline
- font-family: -apple-system-short-caption1
- font-family: -apple-system-short-footnote
- font-family: -apple-system-tall-body
Examples
The upcoming instances demonstrate Apple's latest San Francisco typeface applied to the html tag. We have the option to include the font styling using the element name, id attribute, and class attribute.
Example 1:
The demonstration showcases Apple's latest San Francisco typeface applied to the html element. This particular font style is assigned to the body element of the html document.
<!DOCTYPE html>
<html>
<head>
<title>San Francisco font</title>
<style>
body {
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, sans-serif;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1> C# Tutorial </h1>
<h3> CSS Apple San Francisco font Style </h3>
<p>
According to the study of the developer and users, the Human eyes can easily read the newly designed Apple San Francisco font on the web page.
</p>
<b> The process of the font on your webpage using CSS is explained by Mr. Craig Hockenberry. </b>
<p>
The CSS applies Apple font with various variants for font-family property.
</p>
</body>
</html>
Output
The output shows the Apple font for the web page.
Example 2:
The illustration demonstrates Apple's latest San Francisco typeface applied to the HTML element. This font style is also utilized on the paragraph (p) element within the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>San Francisco font</title>
<style>
p {
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, sans-serif;
background-colour: orange;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1> C# Tutorial </h1>
<h3> CSS Apple San Francisco font Style </h3>
<p>
According to the study of the developer and users, the Human eyes can easily read the newly designed Apple San Francisco font on the web page.
</p>
<b> The process of the font on your webpage using CSS is explained by Mr. Craig Hockenberry. </b>
<p>
The CSS applies Apple font with various variants for font-family property.
</p>
</body>
</html>
Output:
The output shows the Apple font for the web page.
Example 3:
The demonstration exhibits Apple's latest San Francisco typeface applied to the html element. This particular font style is utilized across various elements present on the HTML page.
<!DOCTYPE html>
<html>
<head>
<title>San Francisco font</title>
<style>
h3, b {
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, sans-serif;
background-color: orange;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1> C# Tutorial </h1>
<h3> CSS Apple San Francisco font Style </h3>
<p>
According to the study of the developer and users, the Human eyes can easily read the newly designed Apple San Francisco font on the web page.
</p>
<b> The process of the font on your webpage using CSS is explained by Mr. Craig Hockenberry. </b>
<p>
The CSS applies Apple font with various variants for font-family property.
</p>
</body>
</html>
Output:
The output shows the Apple font for the web page.
Example 4:
The upcoming instance illustrates the Apple typeface along with the identification and class title featured on the webpage. It allows us to target specific components within the HTML element.
<!DOCTYPE html>
<html>
<head>
<title>San Francisco font</title>
<style>
#id1, .class1 {
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, sans-serif;
background-color: orange;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h3 id = "id1"> C# Tutorial </h3>
<h3> CSS Apple San Francisco font Style </h3>
<p class = "class1">
According to the study of the developer and users, the Human eyes can easily read the newly designed Apple San Francisco font on the web page.
</p>
<b> The process of the font on your webpage using CSS is explained by Mr. Craig Hockenberry. </b>
<p>
The CSS applies Apple font with various variants for font-family property.
</p>
</body>
</html>
Output:
The output shows the Apple font for the web page.
Conclusion
Apple designs user-friendly typefaces for display in both Internet Explorer and Firefox browsers, aiding users in effortlessly consuming web page content.