This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Patrik Makrai
Posted Sep 08 - Read on Facebook

If you want to display custom fonts, here is a little how-to:

# The font file is at 'fonts/customFont.otf'

style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode("@font-face {\n" +
"\tfont-family: \"myFont\";\n" +
"\tsrc: local('☺'), url('fonts/customFont.otf') format('opentype');\n" +
"}\n" +
"\tfont-family: myFont !important;\n" +
"}\n"));

document.getElementsByTagName('head')[0].appendChild(style);

layerName.style = {
"font-family": "myFont"
}

4 Comments

Justin Sias

Not sure if this is still relevant or necessary but here is a little function and how to use it below incase anyone wants to optimize this:

Justin Sias

createFont = (fontAlias, fontUrl) ->
style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode("@font-face {\n" +
"\tfont-family: \"" + fontAlias + "\";\n" +
"\tsrc: local('☺'), url('fonts/" + fontUrl + "') format('opentype');\n" +
"}\n" +
"\tfont-family: myFont !important;\n" +
"}\n"));
document.getElementsByTagName('head')[0].appendChild(style);

createFont("sofiaSemiBold", "SofiaProSemiBold.otf")

Erdész Ábel

js accepts smileys now? ;P

Stephen Crowley

Yeah and sometimes it returns sad faces

Read the entire post on Facebook