Menu
Is it possible to specify a system font in a CSS targeted to iOS (to be displayed in a UIWebView), and get similar results as when designing with Interface Builder:
Can a CSS set System, System+Weight or Text Styles instead of font-family:Helvetica Neue:
<html> <head> <style type=\"text/css\"> body{font-family:Helvetica Neue; font-size:14;} </style> </head> <body></body> </html> System
UIFont.systemFontOfSize(), UIFont.boldSystemFontOfSize(), UIFont.italicSystemFontOfSize() System+Weight
As in let mediumWeight = UIFont.systemFontOfSize(17, weight: UIFontWeightMedium)
UIFontWeightUltraLight, UIFontWeightThin, UIFontWeightLight, UIFontWeightRegular, UIFontWeightMedium, UIFontWeightSemibold, UIFontWeightBold, UIFontWeightHeavy, UIFontWeightBlack Text Styles
Body, Callout, Caption 1, Caption 2, Footnote, Headline, Subhead, Title 1, Title 2, Title 3 
790
To use this font on all devices, use a @font-face declaration in your CSS to link to it on your domain if you wish to use it. Just mind the copyright if you do. Make sure the licence you pay for includes web embedding.
One of the most popular fonts in the world, Helvetica Neue (pronounced: noy-uh), is also a huge troublemaker. It was created in Switzerland in the 50s and adopted by Apple's design gurus back in 2013 for the iPhone. Apple's blessing only increased its popularity.
on iOS and OS X by using the “-apple-system” CSS value for the “font-family” CSS Property.
As noted on webkit.org, there are currently discussions in the w3c regarding standardizing this value so authors could simply specify system.
-apple-system on iOS 9 & Safari OS X 10.11
Using font-family: CSS Property:
font-family: -apple-system; font-family: '-apple-system','HelveticaNeue'; // iOS 8 compatible, credit: @MarcoBoschi In context (fallback to HelveticaNeue when -apple-system is undefined):
<html> <head> <style type=\"text/css\"> body{font-family: '-apple-system','HelveticaNeue'; font-size:17;} </style> </head> <body></body> </html> Using font-weight: CSS Property:
normal, bold, bolder, lighter 100, 200, 300, 400, 500, 600, 700, 800, 900 Using font-style: CSS Property:
normal, italic -apple-system-xxx on iOS 8.4.
Using font: CSS Property (represent an entire style, including size and weight):
font: -apple-system-body font: -apple-system-headline font: -apple-system-subheadline font: -apple-system-caption1 font: -apple-system-caption2 font: -apple-system-footnote font: -apple-system-short-body font: -apple-system-short-headline font: -apple-system-short-subheadline font: -apple-system-short-caption1 font: -apple-system-short-footnote font: -apple-system-tall-body In context:
<html> <head> <style type=\"text/css\"> body{font: -apple-system-body;} </style> </head> <body></body> </html> 
► Find this solution on GitHub and additional details on Swift Recipes.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With