Ionic 3 and Angular 4: Adding Custom Fonts like Open Sans and Font Awesome.
Wall Script
Wall Script
Wednesday, June 28, 2017

Ionic 3 and Angular 4: Adding Custom Fonts like Open Sans and Font Awesome.

We all know that Ionic is the useful framework for building HTML 5 mobile applications. It is mainly designed for the front end. When it comes to look and feel of the Ionic website, you have to work more on your application branding standards. Ionic default icons are not up to current market standards. This tutorial is all about how to add custom downloaded fonts like open sans and font awesome for icons into the Ionic application. Let’s see how you use customized fonts in your Ionic website.

Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.


Live Demo


Video Tutorial
Ionic 3 and Angular 4 Adding Custom Fonts like Open Sans and Font Awesome.


Copy Font Files
Copy all of your downloaded font files in src->asserts->fonts folder.
Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.


SASS for Styling

variables.scss
Go to src->theme folder and modify scss with following changes to include "Open Sans" font. Here font-face helps you to import font files to the application.
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/opensans/400/opensans-regular-webfont.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: semi-bold;
  font-weight: 600;
  src: url('../assets/fonts/opensans/600/opensans-semibold-webfont.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: bold;
  font-weight: 700;
  src: url('../assets/fonts/opensans/700/opensans-bold-webfont.ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: extra-bold;
  font-weight: 900;
  src: url('../assets/fonts/opensans/900/opensans-extrabold-webfont.ttf');
}

Implementing in application
$font-family-base: "Open Sans", sans-serif !default;
body{
font-family: "Open Sans" !important;
font-weight: 400 !important;
}

h1, h2, button {
font-family: "Open Sans" !important;
}

Font Awesome
Most popular font for icons. You will undertand more in video tutorial
@import "../assets/scss/font-awesome";
@font-face {
    font-family: 'FontAwesome';
    src: url('../assets/fonts/font-awesome/fontawesome-webfont.eot');
    src: url('../assets/fonts/font-awesome/fontawesome-webfont.eot') format('embedded-opentype'),
    url('../assets/fonts/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('../assets/fonts/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('../assets/fonts/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('../assets/fonts/font-awesome/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

home.html
Copy following classes
<i primary class="fa fa-heart fa-lg"></i>
web notification

8 comments:

  1. Hii..
    Thanks for sharing such a nice article, keep up the good work.

    ReplyDelete
  2. thks bro so helpfull just keep it up

    ReplyDelete
  3. Sir still your import is wrong in here @import "../assets/scss/font-awesome";
    You corrected it on the video, but here you may be miss it :)

    ReplyDelete
  4. hello sir how to add fonts dynamically ?

    ReplyDelete
  5. Thank u for sharing such a nice content
    it really helped me a lot....

    ReplyDelete

mailxengine Youtueb channel
Make in India
X