Change font Ionic 2

Ionic Framework ionic-v3
1

Hello! Somebody know how can I change font of all texts (for example Dosis google font) in ionic 2?
Thanks in advance.

Best regards.

2

You should be able to set a custom font by overriding Sass variables like mentioned in the Theming docs.

Looking at node_modules/ionic-angular/themes/ionic.theme.default.scss it has e.g.

$font-family-base:           -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
3

I proceeded like following:

1- Download google font and css at http://www.localfont.com

2- Unzip file and copy the subfolder fonts to your src/assets

3- In your main css, like app.component.scss, add the content of the unzipped fonts.css file

4- Edit the code you just copied by replacing the url /fonts/ to …/assets/fonts/

5- Define the ionic variable to use the font you just added (in your variable.scss). Like in my case I use Lato so

$font-family-md-base: "Lato";
$font-family-ios-base: "Lato";
$font-family-wp-base: "Lato";

P.S.: Right now, app-script 0.0.36 may not copy automatically within your next build your new assets file to your www/assets. Gonna be fixed in 0.0.37. If it doesn’t happens, just copy them manually this time.

2 Likes
4

Thanks for reply me reedrichards, but I didn’t found directory src/assets and where is my main css? Thanks in advance!

5

Which version of the framework are you building on, because src/assets folder is from RC0 and up.

6

Oh! then its for that. Im working with 2.0.0-beta.37 for thar version its similar? Thanks in advance!

7

Oh hi, thats the ionic-cli version. I’m referring to the Ionic package you’re using. You can find it inside your package.json

8

OK. So… I think that Im using rc.4 like: “@angular/common”: “2.0.0-rc.4”, Is it correct?

9

Thats the Angular version :-). You’re looking in the right file. Look for the ionic-angular package.

10

You should find something like this in your package.json to discover which version you are using:

"ionic-angular": "^2.0.0-rc.1"
11

jeje sorry Im new working with ionic. I think that now I send you the correct info: “ionic-angular”: “2.0.0-beta.11”,

12

Well then, if I reckon correctly it’s normal you don’t find the src/assets directly per default with Beta11

So you’ve got different solutions then. Important is to have the fonts in a subfolder of your www and to introduce the right url in your global scss file. So you could create the src folder and add some gulp task to copy them while you build your project or you could simply copy them manually to that places, but don’t forget to add them to git or whatever repository you use.

Sorry again my solution describe what to do with RC.0 or RC.1. It need some adjustment to work with Beta.

13

Okay, so you have two options here. The first and possibly best one is to upgrade, although not everybody likes the RC’s. If you do migrate your project, you could follow the upgrade steps provided by @reedrichards. Otherwise you don’t have the source folders and you should move it somewhere to the www folder.

14

OK :frowning: thanks for reply me guys!!

15

No problem. Note I’m agree with @luukschoen, if you are new to ionic and start a new project, I would upgrade too

16

OK. Is it better the new version than the older version? What are the improvements?

17

Well there’s a lot of discussion about that. But if you’re starting with a new project or don’t have to much stuff in your project, I would suggest you use the latest RC1 version. It has the best support and includes many fixes (also with regards to beta 11). If you want to now what’s changed over the last two versions you could read up in the migration docs.

1 Like
18

OK! Thanks for the info :slight_smile: Good weekend.

19

Hi @reedrichards :smiley: I’ve been trying for half an hour but don’t works for me, have you got any idea ? Because here you’re talking about a “app.component.scss” in src but I haven’t got that…

20

Half an hour isn’t that long :wink:

So first of all, I’m using RC.4 and app-script 0.0.48 and this is still valid for me.

My main/primary/first/general/global scss file in my case is app.component.scss, therefore I said that if it’s your case too, you should put your code there. But if you use another scss file a main/primary… scss file, then put the code there.

I think it’s just important that the code lines for the fonts (@font-face …) are the first in your scss files.

Do you know which is your primary/main scss file? If know, just try to create an app.component.scss file next to your app.component.ts and try again.