Add a custom font to Apple News

Question

I have a font in both .otf and .ttf format. I'd like to use it on my Apple News article, but I keep getting the error Error: Custom font (postscript name=CustomFontName) not available. I know the JSON is correct because it works if I use a standard font. I've included the font in the same folder as article.json, but beyond that I can't find any documentation on how to do this.

Answer 1

I see no mention of custom fonts in the Apple News Format guidelines. It states in the docs:

fontName: The PostScript name of the font to apply, such as GillSans-Bold. You can reference any font by name. see iOSfonts.com for a list of available fonts.

and elsewhere:

Fonts News supports all iOS system fonts except San Francisco, which was introduced with iOS 9.

which originally led me to believe that it was being implied that custom fonts don't work, but experimenting with the format I see that my assumption was wrong.

Copying the PostScript name of the font (see info panel in OS X Font Book) and placing the font within the same folder as article.json file it works. But make sure if you're going to apply emphasis that you include the relevant italic or bold variants as well.

The fonts I used were open type true type from Google Fonts. You can get the exact ones from that link. I included Roman and Italic variants in my folder and referenced the font by calling it "IM_FELL_DW_Pica_Roman" within the Component Text Styles (i.e. paragraph styles). When I then applied markdown to identify italic text it automatically found the italic variant. I didn't need to reference the italic version separately (i.e. within inline text styles).

Here's my code:

{
    "version": "1.1",
    "identifier": "sketchyTech_Demo",
    "title": "My First Article",
    "language": "en",
    "layout": {},
    "components": [{
        "role": "title",
        "text": "My First Article",
        "textStyle": "titleStyle",
        "inlineTextStyles": [{
            "rangeStart": 3,
            "rangeLength": 5,
            "textStyle": "redText"
        }]
    }, {
        "role": "body",
        "format": "markdown",
        "text": "This is just over the minimum amount of _JSON_ required to create a valid article in Apple News Format. If you were to delete the dictionary enclosing this text, you'd be there.",
        "textStyle": "bodyStyle"
    }],
    "componentTextStyles": {
        "titleStyle": {
            "textAlignment": "center",
            "fontName": "HelveticaNeue-Bold",
            "fontSize": 64,
            "lineHeight": 74,
            "textColor": "#000"
        },
        "bodyStyle": {
            "textAlignment": "left",
            "fontName": "IM_FELL_DW_Pica_Roman",
            "fontSize": 18,
            "lineHeight": 26,
            "textColor": "#000"
        }
    },
    "textStyles": {
        "redText": {
            "textColor": "#FF00007F"
        }
    }
}

(Note: Trying to add bold it silently fell back on italic because the relevant font wasn't available.)

One final thing I would say is that the use of custom fonts appears to be undocumented although it works. Therefore, it won't necessarily be the case (unless you've seen confirmation elsewhere) that Apple will accept the use of custom fonts when you upload.

Answer 2

There are some useful tips on how to get the actual name of your custom font in this answer - it isn't always what you'd expect. The same rules apply to the Apple News ecosystem.

Your font definition should look like this:

"fontName": "Raleway-ExtraLight"