BodyMovin / Lottie: How to embed fonts

General
,
1

I am new to HTML templates and was experimenting with BodyMovin and Lottie. I finally figured out, how to change texts in such an animation. That was a big success for me :smiley: But now I am struggling with font embedding.

Can somebody enlighten me? What do I enter in the dialog box, that pops up on exporting (in BodyMovin) and what do I add to the templates code? What font format are supported?

2

I haven’t ever used type with Lottie (never encounter a need for it) but I assume this should work just via plain CSS. Have you tried?

@font-face {
    font-family: "myFont";
    src: url("fonts/FunkyFont.ttf");  }

#myLottieElement {
    font-family: myFont;
}
3

Thanks, will try that.

4

I have used ttf and otf fonts. In the dialog box just write the path to the font(think the field is called path) , and a check in the URL option. I normally put the font in the same location as the rest of the files, so I would just type in: fontname.ttf. I can take a picture of what I do tomorrow and post if it helps. I dont write any code in the template about fonts.

5

I figured it out: I had a design, that uses “Helvetica Neue” and the font was in OTF format. I added the path etc. to the output Window in BodyMovin on Export and ended up with this font list in the JSON file:

	"fonts": {
		"list": [
			{
				"origin": 3,
				"fPath": "../fonts/HelveticaNeue-Roman.otf",
				"fClass": "Roman",
				"fFamily": "Helvetica Neue, sans-serif",
				"fWeight": "",
				"fStyle": "55 Roman",
				"fName": "HelveticaNeue-Roman",
				"ascent": 71.39892578125
			},
			{
				"origin": 3,
				"fPath": "../fonts/HelveticaNeue-HeavyCond.otf",
				"fClass": "Heavy",
				"fFamily": "Helvetica Neue, sans-serif",
				"fWeight": "",
				"fStyle": "87 Heavy Condensed",
				"fName": "HelveticaNeue-HeavyCond",
				"ascent": 71.39892578125
			}
		]
	},

Playing this in Caspar showed the text in Times New Roman, so that was not what I wanted. I then experimented a bit an found this solution:

Add this CSS to the template:

        @font-face {
            font-family: "HelveticaNeue-Roman";
            src: url("../fonts/HelveticaNeue-Roman.otf") format("opentype");
        } 
        @font-face {
            font-family: "HelveticaNeue-HeavyCond";
            src: url("../fonts/HelveticaNeue-HeavyCond.otf") format("opentype");
        }

and edit the JSON font block to this:

	"fonts": {
		"list": [
			{
				"origin": 3,
				"fPath": "",
				"fClass": "",
				"fFamily": "HelveticaNeue-Roman",
				"fWeight": "",
				"fStyle": "",
				"fName": "HelveticaNeue-Roman",
				"ascent": 71.39892578125
			},
			{
				"origin": 3,
				"fPath": "",
				"fClass": "",
				"fFamily": "HelveticaNeue-HeavyCond",
				"fWeight": "",
				"fStyle": "",
				"fName": "HelveticaNeue-HeavyCond",
				"ascent": 71.39892578125
			}
		]
	},

That solved it for me. Don’t ask me why :slight_smile:

6

i am new to this CG world. i have a AE bodymovin template a “lower third” with to text blocks. i can see you figured out how to change the text. can you teach me how? :smiley:

7

Yes, I figured it out, and a lot of stuff more.

Would it be out of discussion to try Blueprint, my application, that allows to generate templates out of BodyMovin animations without programming? All of my know how on this topic went into this software. The good thing: You don’t need to learn to program and can concentrate on the After Effects side of the template creation, while Blueprint does the rest.

8

i will have a look at your program. but i know how to code. but im struggeling using cg clients and with keys f0, f1. i can find the change the with the code. but i want to create the template to casparcg

9

in your program? how do you import the lottie.js files that bodymovin has created?

10

You import the .json file, not the .html. With the download comes a help file, that explains the workflow.

11

i cant find it. all i can see is the help-file on the webpage, but after downloading i see the page but cant open them?