Using fonts with Onsen UI

  • How would I go about using my own fonts with Onsen UI?

  • @StevieC Just include them like you would a website.

  • Thanks,
    I had forgotten that it is CSS that handles it.

    But, I presume. not link to them externally (e.g. Google fonts)? As it’s an app.

    I found this at

    @font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

    Is that the kind of thing?

  • I’m always using my own fonts in my apps.

    I use font faces and it works fine…

    You can also include Google fonts as well if yo uwant but this will make your app slightly slower than if you use font faces.

  • @Roozbeh-Farhadi That’s great. Thanks.

Log in to reply