Ionic 3 and Angular 4: Adding Custom Fonts like Open Sans and Font Awesome.
Wall Script
Follow Me:
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>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


2 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

Make in India