Capacitor Full App - Ionic Angular
  • What is Capacitor Full App - Ionic Angular?
  • Understand the Frameworks
  • Template Highlights
  • Setup
    • Initial Setup
  • Running the app
  • Building App on device
  • Deploying app as PWA
    • Deploy PWA on Firebase
  • How to use this template
    • Two way to use this Template
  • Removing a Page / Component
  • Removing a plugin
  • Extra
    • Troubleshooting
    • FAQ
  • Changelog
  • Features
    • Startup Features
      • Layouts
      • Firebase
      • Addons
        • Globalization - Translation
        • Content Loaders
        • Custom Fonts
        • Infinite Scroll
        • Pull to Refresh
        • List Re-ordering
        • Date Time Pickers
        • Settings
      • Login & Signups
      • Sidemenu Layouts
      • Wordpress
        • How to integrate
      • Video Playlist
      • Grid and List Layouts
      • Chat Lists & Chat Pages
    • Pro Features
      • Pro Addons
        • AdMob
          • Integration
          • Setting up Google Admob
        • Music Player
        • Push Notifications
        • Local Notifications
        • Device
        • Clipboard
        • Social Login
        • In-App Browser
        • Sweet Alerts
        • Social Sharing
        • Google Places
        • Google Autocomplete
        • Image Cropper
      • Phaser Game Framework
      • WooCommerce
      • Payment Gateways
    • Others
      • Adding Icon and Splash
Powered by GitBook
On this page
  • Method 1. Using custom font files from Assets
  • Method 2. Using Google Fonts

Was this helpful?

  1. Features
  2. Startup Features
  3. Addons

Custom Fonts

Using custom fonts is very easy and straight-forward in Ionic 4 apps. There are two ways it can be done

PreviousContent LoadersNextInfinite Scroll

Last updated 5 years ago

Was this helpful?

Method 1. Using custom font files from Assets

In this method, you need to download custom font files and keep them in assets for static storage. In the sample provided in the app, we have two different fonts downloaded in assets

  • Muli - Full font family with various font-faces

  • Qranklestein - Single font file, hence single font-face

The font is imported in global.scss using

@font-face {
  font-family: 'Qranklestein';
  font-style: normal;
  font-weight: normal;
  src: url('./assets/fonts/Qranklestein.ttf');
}

To define different font-faces of same font, vary the font-style and font-weight properties of the font-face. For example, Muli-Bold-Italic font-face is imported as

@font-face {
  font-family: 'Muli';
  font-style: italic;
  font-weight: bold;
  src: url('./assets/fonts/Muli-BoldItalic.ttf');
}

To use the font in your app, you just need to use the mentioned font-family in any of the CSS styles

:root[mode=ios] .muli,
:root[mode=md] .muli{
  --ion-font-family:  'Muli'!important;
  font-family:  'Muli' !important;
}

Method 2. Using Google Fonts

If you want to skip the hassle of importing fonts from assets, and use the vast variety of Google Fonts, you can simply import them in your index.html like this

<link href="https://fonts.googleapis.com/css?family=Srisakdi" rel="stylesheet">

and then use the font simply by defining the font-family in a CSS class

:root[mode=ios] .srisakdi,
:root[mode=md] .srisakdi{
  --ion-font-family:  'Srisakdi'!important;
  font-family:  'Srisakdi' !important;
}

Whichever Font you like, click the + sign next to it. Your font gets selected. Click the hovering div at the bottom saying 1 family selected , you will see the details of the selected font

Use the <link> and CSS code snippet to import the font into your app as explained earlier in this section. If you have variety of font styles (Bold, italic etc ) make sure to include that in the CSS declarations as explained in Method 1 above.

To find a Google font, visit . You will see a huge variety of fonts

Google Fonts