how can use custom font in ionic

Question

hi how can i use some custom font in my ionic app? for example this font http://fontonline.ir/btitrbold.html

<link href='http://www.fontonline.ir/css/BTitrBold.css' rel='stylesheet' type='text/css'>

but if my app is offline fonts won't load i open the Reference

@font-face {
font-family: 'BTitrBold';
src: url('http://fontonline.ir/fonts/BTitrBold.eot?#') format('eot'),
url('http://fontonline.ir/fonts/BTitrBold.ttf') format('truetype'),
url('http://fontonline.ir/fonts/BTitrBold.woff') format('woff');
}

can i download fonts and put it in for example assets folder and change style code to load it offline?

Yes, you can download and add it to your assets/fonts folder. — Najam Us Saqib, Apr 15 '20 at 12:03
Does this answer your question? [How to import a new font into a project - Angular 5](https://stackoverflow.com/questions/49878988/how-to-import-a-new-font-into-a-project-angular-5) — mr. pc_coder, Apr 15 '20 at 12:12

Najam Us Saqib · Answer 1 · 2020-04-15T16:23:27.913

Download your required Font and add it to your assets/fonts folder.

Go to your theme folder open variable.scss file

import your font like:

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

If you want to use it for Whole app then add it to your global.scss file

e.g:

* {
    font-family: 'YOUR_FONT_NAME'; // font-family name you declared above.
}

how can use custom font in ionic

1 Answers1