Custom font in Component (ionic 2)

Ionic Framework ionic-v3
1

I’m trying to use a custom font in a single Component.

I have .eot, .woff, .otf files etc but I don’t know where in which folder I should put them,
and how to setup css/scss so that the component template has access to the font.

Preferable I would like to put font and related css in the component folder (not application-wide)
so that it would be easily reusable.

I found some information about custom fonts but that was mostly ionic 1 and/or application-wide.

Concrete: suppose I have MyFont.eot, MyFont.woff etc. that I want to use in MyComponent.

The css would probably look like this:

@font-face {
  font-family: "C"
  src: url('???/MyFont.eot')
  src: url('???/MyFont.eot') format('embedded-opentype'),
       url('???/MyFont.woff') format('woff'),
       url('???/MyFont.otf') format('opentype'),
       url('???/MyFont.svg#MyFont') format('svg')
}

I’m guessing MyComponent.scss would then contain something like
p {
font-family: “MyFont”;
font-size: 12px;
}

2

Follow the link http://stackoverflow.com/questions/36830848/how-to-add-new-custom-font-icons-in-ionic2/36833619#36833619

3

Thanks for the link, I got it working!
(actually by copying and amending the style roboto.scss with the font-face src on one line…)

But

  1. I find it counterintuitive to add something in the ‘build’ folder manually. I would expect this folder to be populated automatically based on (re)sources in app, and even possibly be erased by a clean target.

  2. The proposed solution is still application-wide. I was looking for a way to “embed” the font in a single component, making it easy to reuse that in another project. Don’t know if that’s possible.

4

As I suspected, putting fonts and css manually in www/build is not a good idea, because they can get erased
(e.g. by restarting ionic serve).

What is the proper place to put font and css? And how do I tell the build system to deploy them to www/build?

5

Must be something like this:

gulp.task('copy', function() {
  return gulp.src('path_to_my_font')
    .pipe(gulp.dest('www/build/fonts'))
});

And you could add this task to the build task

[‘sass’, ‘html’, ‘fonts’, ‘scripts’, ‘copy’]

6

You can create a folder inside www by yourself and it will not be erased (e.g www/lib).

7

Sorry i couldn’t reply. I have edited the link answer similar as mentioned by the user xr0master

8

Should Ionic Team consider to add a public folder to copy assets to the build folder when building?

1 Like
9

You could just do this yourself pretty easily.

10

I made a video how to proceed. I hope you can help.

11

Hello nilton_felicio, you are brazilian? Your video is very good, thank you for sharing. When I run the ionic serves, the source appears good, but when I put in the device, it does not appear. Would you help me? Thanks in advance.

12

Yes, I am from Brazil. I need to better understand how this your project. I need more details .

13

Everything here sounds more complicated than it needs to be. Maybe this is a new way to do it, but here’s how I change the font globally from the default Helvetica Neue.

All of this in my variables.scss. Place the ttf in src/assets/...

@font-face {
  font-family: Source Sans Pro;
  src: url("../assets/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf");
}

$font-family-ios-base: 'Source Sans Pro';
$font-family-md-base: 'Source Sans Pro';
$font-family-wp-base: 'Source Sans Pro';

Works when I do ionic build, and send to Ionic View.