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.
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.
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');
}
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;
}
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;
}
@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>
Hii..
ReplyDeleteThanks for sharing such a nice article, keep up the good work.
thks bro so helpfull just keep it up
ReplyDelete9lessons
ReplyDeletegood work
ReplyDeleteSir still your import is wrong in here @import "../assets/scss/font-awesome";
ReplyDeleteYou corrected it on the video, but here you may be miss it :)
hello sir how to add fonts dynamically ?
ReplyDeleteThank u for sharing such a nice content
ReplyDeleteit really helped me a lot....
thanks it was helpfull
ReplyDelete