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:
<!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> |
Output:
Please Login to comment...