Joe Blow Joe Blow - 3 months ago 7
iOS Question

UIWebView, simply select "actual" font in css, not just family?

In iOS, using UIWebView, I load this short text file
and then display it in a UIWebView. (


<html><head><style type='text/css'>
font-family:'Source Sans Pro';
html { -webkit-text-size-adjust:none; }
<body leftmargin=0 topmargin=0>
example text...

Here are the 12 "actual" font names installed (
print(UIFont.fontNamesForFamilyName("Source Sans Pro"))

["SourceSansPro-BoldIt", "SourceSansPro-SemiboldIt", "SourceSansPro-ExtraLight", "SourceSansPro-Semibold", "SourceSansPro-Bold", "SourceSansPro-Black", "SourceSansPro-Regular", "SourceSansPro-Light", "SourceSansPro-BlackIt", "SourceSansPro-It", "SourceSansPro-ExtraLightIt", "SourceSansPro-LightIt"]

Now in the UIWebView

font-family:'Source Sans Pro';

That works perfectly; the regular
Source Sans Pro
font appears.

But. Quite simply,how the hell do I tell the css to use "ExtraLight", "BlackIt" and so on?

How to choose a specific one of the 12 fonts???



You have to use the actual font names in the CSS:

        <style type='text/css'>
            body {
                margin: 30px;
                font-family: 'SourceSansPro-Regular';
                font-size: 12pt;
            h1 {
                font-family: 'SourceSansPro-Black';
                font-size: 16pt;
                font-weight: normal
            .light {
                font-family: 'SourceSansPro-ExtraLight';
        <p>Normal Text</p>
        <p class="light">Light Text</p>

enter image description here

One side note: When you work with fonts that provide a 'real' bold font face it is a good idea to remove the 'artificial' bold font-weight as it makes the already bold font even bolder which does look ugly. (That's why I added font-weight: normal to the h1 selector)