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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>            

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.