How to add Custom Fonts to Ionic App

This post will explain how you can import custom fonts, such as those from Google Fonts, and add them to your Ionic app. It is nice that Ionic offers default fonts to match the native fonts, but sometimes you want something a bit different and consistent across platforms, such as for company branding.

1. Find and download a font

  • Google Fonts has a large repository of Fonts, I will use Source Code Pro
  • Click “SELECT THIS FONT”
  • The font will be added to the “Families Selected” section; click on that to expand
  • Click on the download icon to download the .ttf files

2. Import the font into your Ionic project directory

  • Copy the .ttf files to src > fonts (create a new directory if necessary)
  • Create a fonts.scss file in src > themes > fonts.scss
  • In the fonts.scss file, add the font-face for each font file
    • font-family: a consistent name for the font
    • src: the src of the font file in the assets directory
    • font-weight: the weight of the font in that file
    • font-style: the style of the font; normal, italic, etc;
@font-face {
   font-family: 'Source Code Pro';
   src: url('../assets/fonts/SourceCodePro-ExtraLight.ttf');
   font-weight: 200;
   font-style: normal;
 }
 …
 @font-face {
   font-family: 'Source Code Pro';
   src: url('../assets/fonts/SourceCodePro-Regular.ttf');
   font-weight: 400;
   font-style: normal;
 }
 …
 @font-face {
   font-family: 'Source Code Pro';
   src: url('../assets/fonts/SourceCodePro-Black.ttf');
   font-weight: 900;
   font-style: normal;
 }
  • Note, if you have multiple file formats you can define the font-face like the following:
@font-face {
   font-family: 'customfont';
   src: url('../assets/fonts/customfont.eot') format('embedded-opentype'),
     url('../assets/fonts/customfont.ttf') format('truetype'),
     url('../assets/fonts/customfont.woff') format('woff'),
     url('../assets/fonts/customfont.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }
  • Import font.scss; add the following line to src > app > app.scss
@import '../theme/fonts';

3. Use the font

  • Add css to the app, using the name of the font-family
span {
   font-family: 'Source Code Pro';
 }

4. Result

Done! You can see the new custom font style in your Ionic app.

1 thought on “How to add Custom Fonts to Ionic App”

Leave a Comment

Your email address will not be published. Required fields are marked *