Web Fonts (Open Source) for Ionic/ Hybrid App

ionic-v1
1

Hey Guys!

Could someone suggest some good “open-source” resources for downloading Web Fonts to use with Cordova Hybrid Apps?

Thanks in advance! :slight_smile:

2

Hi @naveenkarippai1,

Is something like this what you’re referring to?:

Regards,

3

Hi @nicraboy ,

Thanks for the reply. I’ve been following your posts on Youtube/blogs.It’s really handy and useful.

Maybe my question was not very clear -
Where can I download open source Fonts like “Comic Sans” or “Helvetica” to use on Hybrid Apps?

I need some new Font-Text style to use in the App.

1 Like
4

@naveenkarippai1 you can include external fonts multiple ways

  • Bundle the font file with your app and use @font-face declarations.
@font-face {
    font-family: "customfont";
    src: url("./fonts/arial.ttf") format("opentype");   
        /* Make sure you defined the correct path, which is related to
            the location of your css file  */ 
    }
    body {
        font-family: "customfont";
        font-size:30px;
    }

The down side of this is that you are include more files so your app size will go up.

Google web fonts is a quick solution, but if your app isn’t connect to the internet, you won’t be able to load the font, so make sure you declare a fall back.

body{
  font-family: 'Open Sans', sans-serif;
}
1 Like