Hybrid View

  1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default How to use a custom font?

    How to use a custom font?


    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!

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      1  

    Default


    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

    Code:
    /assets/Tungsten-Medium.otf
    Let me know if this fixes the problem for you.

  3. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default


    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!


    Quote Originally Posted by miro.bojic View Post
    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

    Code:
    /assets/Tungsten-Medium.otf
    Let me know if this fixes the problem for you.

  4. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default


    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!

  5. #5
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      1  

    Default


    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:

    Code:
    @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;
    }

  6. #6
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default


    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?

  7. #7
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      1  

    Default


    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.

    Code:
    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

    Code:
    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.

  8. #8
    Sencha User
    Join Date
    Dec 2013
    Posts
    23
    Vote Rating
    1
    cabbas is on a distinguished road

      0  

    Default


    Oh gosh, that's right, I forgot about quotation marks. Thanks for linking to all the documentation as well!

  9. #9
    Sencha User
    Join Date
    Sep 2013
    Location
    Switzerland
    Posts
    22
    Vote Rating
    0
    thomahawk is on a distinguished road

      0  

    Default


    I have the actual version 1.5 build 219 of Sencha Animator and still have that same problem. I mean that bug has been reported 4 months ago. Does Sencha not fix bugs?

    I have used your refresh workaround by using the complete path to the font files
    file:///Users/name/Desktop/zwei Berge.animproj/assets/fontfile.ttf

    and it worked. But I must tell you, working with several fonts like in my case, and each font of course needs the 4 file formats eot ttf wof svg for compatibility, it is a lot of dumb work changing all paths and changing them back. I, and certainly every Sencha Animator user would appreciate if you could do a little maintenance to your app now and then.

    Additionally, the workaround only worked for the first font. Attempting the same with the second font did not change anything, still displaying Helvetica. So, a bug fix is really needed.