How to use a custom font?

[cabbas]

Hi there,

I'm trying to install and use a custom font with Sencha Animator.

The font I'm using is named "Tungsten Medium", it's installed on my computer and I have made a copy of it in my Sencha project directory, like this: (/Project_name.animproj/Tungsten-Medium.otf)

I have used some custom CSS in my project in the following place:

Screen Shot 2014-01-07 at 4.40.45 PM.png

The interesting thing is that the font will render correctly within Sencha, however, when I preview my work (cmd + shift + enter) or export (to HTML page), the font does not render correctly, and instead defaults to Georgia.

Is there a step that I am missing, or doing incorrectly?

Thanks for your time!

[miro.bojic]

Hi cabbas,

Since you manually placed the font in the project folder, project does not know that it belongs with the animation when you export it - whether it's the final animation or just a preview. There are 2 things you can do:

1. When you export the project, manually copy the font to the export folder again.

2. A better solution instead is to add the font to your project library by selecting the Library tab and then clicking the 'add new asset' button to import your font. Preview will not be available, but the font will be saved in the project asset folder. In your font CSS code you'll have to adjust your path to

/assets/Tungsten-Medium.otf

Let me know if this fixes the problem for you.

[cabbas]

Thanks so much for your help, miro.bojic! I added the font directly to the project library as you suggested and everything work great! The code was altered to read the following:

@font-face
{
font-family:Tungsten;
src: url(assets/Tungsten-Medium.otf);
}
.customfont {
font-family:Tungsten;
color:#ffffff;
font-size:80px;
}

Thanks again for your help!

Hi cabbas,

Since you manually placed the font in the project folder, project does not know that it belongs with the animation when you export it - whether it's the final animation or just a preview. There are 2 things you can do:

1. When you export the project, manually copy the font to the export folder again.

2. A better solution instead is to add the font to your project library by selecting the Library tab and then clicking the 'add new asset' button to import your font. Preview will not be available, but the font will be saved in the project asset folder. In your font CSS code you'll have to adjust your path to

/assets/Tungsten-Medium.otf

Let me know if this fixes the problem for you.

[cabbas]

Hey there,

I have a related question:

Say for example I want to add additional fonts in addition to Tungsten-Medium.
I also wish to add Tungsten-ExtraLight and Tungsten-Light, how would I do this? Do I create new entries in the Type > Edit menu like this?

Screen Shot 2014-01-08 at 11.16.17 AM.png

Thanks!

[miro.bojic]

That's correct, only when defining the font with @font-face you should specify a different name under font-family to differentiate it. Basically, in this case, font-family is your custom name that you give to your font - see more info on the parameters here: http://www.w3schools.com/cssref/css3...-face_rule.asp

I know that when dealing with typography font-family encompasses all the weights of a single font, but in this case CSS implementation decided to deal with this in a different way.

To sum it up, you should do the following:

@font-face {
  font-family:TungstenMedium;
  src: url(assets/Tungsten-Medium.otf);
}
//this you don't need to define here - you can select color and size
//directly in the 'Type' section of the properties
//you only really need @font-face definition
.customfont  {
  font-family:TungstenMedium;
  color:#ffffff;
  font-size:80px;
}

[cabbas]

Awesome, thank you! This works perfectly, and I have removed the extra code as you suggested.

I noticed that when I updated my css in the Type > Edit menu, the new fonts do not display correctly in Sencha, however when I preview or export, it works! In other words, the type within Sencha seems to default-display as Helvetica, and when I preview (cmd + shift + enter) it displays correctly as Tungsten, which makes laying things out a bit tricky. Is there a way to fix this?

[miro.bojic]

It seems you discovered a little bug - the font is not refreshing properly when added through css rules.

There is a workaround - when defining the font at first, enter the absolute path to the font file, e.g.

src: url(file:///Users/username/Desktop/projectName.animproj/assets/TungstenMedium.otf);

This should cause the font on the canvas inside Animator to refresh. After this, you can revert it back to

src: url(assets/TungstenMedium.otf);

The loaded font should also persist after you close the project / Animator and reopen it. We'll look into what's causing this refreshing issue.

[cabbas]

Okay, thanks for the help! Good to know about the bug. Unfortunately, I'm not able to get the absolute path to work on my mac for some reason, the path is formatted just like your example. It's not a dealbreaker though, I can check my text positions using preview.

Thanks again for all the help!

[miro.bojic]

What you can try is also to install the font on your system, and then create a custom font simply by adding the font family in your custom fonts. This should preview correctly inside Animator as long as you are working on a system that has the font installed, and then for the export you can switch to the css definition of the font.

See attached screenshots for the example.

ex1.png

ex2.png

[cabbas]

Okay, I have my fonts installed, and tried using the Edit > Font Family method, but I seem to be getting inconsistent results.

Tungsten, for example, displays correctly in Sencha (yay)! However, when I do the same with Blender Pro Book, the display defaults to Helvetica in Sencha, but renders correctly when I preview.

Also, I have a number of different styles for Tungsten (Tungsten Light, Tungsten Book, Tungsten Black, etc), how would I choose one of the different styles?