Embedding Font with many faces in Hype

embed-robot.head.html

<!-- How to embed Roboto locally -->

<!-- see instructions here: http://tumult.com/hype/documentation/2.0/fonts/ -->
<!-- download files from Google (google it) -->

<style>
    /* base face */
    @font-face {
        font-family: 'Roboto', Arial, Helvetica;
        src: url('${resourcesFolderName}/Roboto-Regular.ttf') format('truetype');
    }
    @font-face {
        font-family: 'Roboto', Arial, Helvetica;
        src: url('${resourcesFolderName}/Roboto-Italic.ttf') format('truetype');
        font-style: italic;
    }
    /* Other Weights */
    @font-face {
        font-family: 'Roboto', Arial, Helvetica;
        src: url('${resourcesFolderName}/Roboto-Bold.ttf') format('truetype');
        font-weight: 700;
    }
    @font-face {
        font-family: 'Roboto', Arial, Helvetica;
        src: url('${resourcesFolderName}/Roboto-BoldItalic.ttf') format('truetype');
        font-weight: 700;
        font-style: italic;
    }
</style>