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 