Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic change default font

Tags:

I know this question is asked and answered before in the links below. I want to change the default font without having to add to every css.

Things I have tried:

  1. Changing the .tff, .eot, .woff, .svg file directly to merge my fonts and ionicons
  2. Tried to implement the font by specifying it in html and css file (it works, but i want it to be default)
  3. Overwrite the www/lib/ionic/fonts with open-sans font (the ionicons disappear)
  4. When i use the first link (all formatting is gone, only left with text and buttons) I also tried placing the font-face on top and bottom in scss/ionic.app.scss

Please help! The answers i have seen are instructions but no explanation how it works. I don't know how "ionic setup sass" works/what it does. How gulp plays a part in this.

https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459

https://forum.ionicframework.com/t/change-font-family-and-use-ionicons-icons/26729

like image 603
Sherlin Avatar asked Jun 12 '16 07:06

Sherlin


People also ask

How do I use Google fonts in ionic?

After selecting the font, open the highlighted link in the screenshot above, in a new tab. Again, open the link provided in the latin section, just like in the above image and download or save the file directly in you ionic project. The location to save the file will be YOUR-IonicApp > src/assets/fonts .

How do you use font family?

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: Separate each value with a comma. Note: If a font name contains white-space, it must be quoted.


2 Answers

The correct solution for Ionic 2 should be to change the $font-family-base variable and its friends. That's the way Ionic is made to do it. It gives you more control (like having different fonts per platform), and it avoids the !important keyword, which is always a good thing.

Using Ionic 3.3, go to your variables.scss and find the section "Shared variables". Add these lines:

$font-family-base: 'MyFont'; $font-family-ios-base: 'MyFont'; $font-family-md-base: 'MyFont'; $font-family-wp-base: 'MyFont'; 
like image 188
Coo Avatar answered Sep 28 '22 00:09

Coo


For Ionic 4

There are global variables that are shared across components. --ion-font-family is one of them. Add this in property under :root in variables.scss:

  :root {       --ion-font-family: 'MyFont';   } 

Ionic 4 Docs: Advanced Theming Documentation

like image 25
codeherk Avatar answered Sep 27 '22 23:09

codeherk