Joe Blow Joe Blow - 5 months ago 9
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. (

loadHTMLString
)

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


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

body
{
font-family:'Source Sans Pro';
font-size:12pt;
}


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



Help!

Answer

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

<html>
    <head>
        <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';
            }
        </style>
    </head>
    <body>
        <h1>Header</h1>
        <p>Normal Text</p>
        <p class="light">Light Text</p>
    </body>
</html>

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)