I would suggest changing the class name to something like .my-app-footer so the Web SDK does not overwrite it.
To fix the font issue, try adding !important; to your font declartion in your css or do this to change all the fonts (even the Web SDK fonts)
* {
font-family: fontfamilyhere;
}
It is not wrong, we just do not recommend it.
You could try adding this css to prevent the second div from displaying:
body > #zmmtg-root {
display: none !important;
}
Let me know if that helps!
Thanks,
Tommy