Add custom font ionic 2

Ionic Framework ionic-v3
1

Hello everybody! I am trying to add to ionic a personal source, specifically “neo sans”. I have created a scss file to insert the font-face, but then I do not know how to use this font inside the elements. I have to care somehow.

I have seen that in the file variables.scss, we have imported the source roboto, but I do not know how to add my source.

Thank you very much for the help

2

Hi dtrujo,

I did it this way:

app.scss (global styling for your app)

    @font-face {
  font-family: 'Akzidenz-Grotesk Next';
  font-weight: normal;
  font-style: normal;
  src: url('../assets/fonts/agnextregular-webfont.eot');
  src: url('../assets/fonts/agnextregular-webfont.eot?#iefix') format('embedded-opentype'),
       local('Akzidenz-Grotesk Next'),
       local('Akzidenz-Grotesk Next'),
       url('../assets/fonts/agnextregular-webfont.woff') format('woff')
}

Afterwards, I added (modified? dont know if those variables where preset before) in variables.scss in the theme folder:

// Fonts
// --------------------------------------------------

$font-family-md-base: "Akzidenz-Grotesk Next";
$font-family-ios-base: "Akzidenz-Grotesk Next";
$font-family-wp-base: "Akzidenz-Grotesk Next";

Font files are placed in src/assets/fonts

2 Likes
3

Thanks Gregg this work fine for me!

1 Like
4

Hello there, your soultion works like a charm, but some fonts dont accept to be converted to .woff, How can I use them?

5

Hi jotaeme,

maybe you don’t need woff at all. All current browsers do support ttf, so this should be enough to specify.

My example above is based on a current use case where those font formats where provided by a client, but you could specify ttf or woff2, too.

6

So, would it be the same code but changing woff for ttf?
Thank you very much for your answer.

7

Hi every body

I faced te same broblem with font
but solved it where the file was open by anther solution (it was selected by windows explorer and the preview pane active :smile:
i had only to close the explorer or unfocused the selected file
then every thing work fine