How to Add Apple’s new San Francisco font on a Webpage using CSS ?

Last Updated : 29 Jan, 2020

The newly created Apple’s San Francisco font is comfortable for human eyes as per research. Normally Apple’s font can not be used on any webpage through CSS. These kind of fonts are in-build in Apple’s product but the new San Francisco font can be used in any web content. Mr. Craig Hockenberry introduces the procedure of how we can use that font on your webpage through CSS only.

Syntax:

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

Firefox and Internet explorer use -apple-system; and for chrome we use BlinkMacSystemFont.

Note: For system use you can download San francisco font from here. After downloading you have install each version one by one.

Other available variants:

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

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>San Francisco font</title> 
  
    <style> 
        body { 
            font-family: -apple-system,  
                BlinkMacSystemFont, sans-serif; 
        } 
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h3>Welcome To San francisco font</h3> 
      
    <p> 
        This font are pplicable 
        now in webpages 
    </p> 
      
    <p> 
        To apply this font on your web 
        site through CSS just follow the 
        body tag element in the style tag 
    </p> 
</body> 
  
</html>             