BodyMovin / Lottie: How to embed fonts

General
,
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: