Set font family in TVML

Asked 1/3, 2016 at 22:29 Answered 17/11, 2017 at 18:59

In my TVML app I am able to set font style properties such as font-size and font-weight using tv-text-style:none, however I am not able to set the font-family property, which seems to be ignored:

var Template = function() { return `<?xml version="1.0"    encoding="UTF-8" ?>  
<document>  
    <head>  
        <style>  
            .customText {  
                tv-text-style: none;  
                tv-position: center;  
                color: white;  
                font-size: 40px;  
                font-weight: bold;  
                font-family: Courier;  
            }  
        </style>  
    </head>  
    <paradeTemplate>  
...  
                <listItemLockup>  
                    <title>Title</title>  
                    <relatedContent>  
                         <divTemplate>  
                             <title class="customText">abcABC</title>  
                         </divTemplate>  
                    </relatedContent>  
                </listItemLockup>  
...

Can I set a font-family different from the system font family?

Thanks for your help,

Luca

Sara answered 1/3, 2016 at 22:29 Comment(2)

Is there a reason you think this should be possible? I don't see anything in developer.apple.com/library/prerelease/tvos/documentation/… that suggests you get any control over the actual font used. – Christo 2/3, 2016 at 0:10

font-family is listed in the docs developer.apple.com/library/content/documentation/… – Burdock 26/12, 2016 at 11:20

If you want to use custom font for your title, you should implement custom TVViewElement that will use any font. First of all, you need to implement your own TVInterfaceFactory , it can be done like that (Swift 2 solution for tvOS 9):

import UIKit
import TVMLKit

class MyFactory: TVInterfaceFactory {

    override func viewForElement(element: TVViewElement, existingView: UIView?) -> UIView? {

        switch element {

        case let element as MyText where element.elementName == "myCustomText":
            let view = MyTextView(frame: CGRectMake(0,0,100,50))
            view.text = "my text"
            return view

        default:

            break
        }
        return nil
    }
}

After that you need to implement a custom TVML-item:

class MyText: TVTextElement {

    override var elementName: String {

        return "myCustomText"
    }

    var text: String? {

        guard let textValue = attributes?["text"] else { return nil }
        return textValue
    }
}

And now you need to implement UIView for your TVTextElement:

class MyTextView: UIView {

    var label: UILabel!

    override init(frame: CGRect) {

        super.init(frame: frame)
    }

    var text : String {
        get {

            return self.text
        }
        set(value) {

            self.label = UILabel(frame: self.frame)
            self.label.text = value
            self.label.textColor = UIColor.whiteColor()
            self.label.font = UIFont(name: "Your custom font", size: 20.0)
            self.addSubview(self.label)
        }
    }

    required init?(coder aDecoder: NSCoder) {

        fatalError("init(coder:) has not been implemented")
    }
}

Now you can use your custom item in TVML like that:

<myCustomText text="hello world"></myCustomText>

Also, don't forget to register you custom item in didFinishLaunchingWithOptions method:

TVInterfaceFactory.sharedInterfaceFactory().extendedInterfaceCreator = MyFactory()
TVElementFactory.registerViewElementClass(MyText.self, forElementName: "myCustomText")

Pontine answered 1/8, 2016 at 6:54 Comment(1)

FYI to all, the function that needs to be overrided in the implemented custom TVInterface is now "makeView" not "viewForElement." – Hilde 21/10, 2017 at 20:44

font-family is now available in TVML. No need to use TVInterfaceFactory for custom font support anymore.

Example:

tv-text-style: 'none'
font-family: 'Times New Roman'

Apple TV Markup Language Reference: font-family

Engadine answered 17/11, 2017 at 18:59 Comment(0)

Recommended topics

Hot tags