GUI Editor :: Load Typekit fonts


I was wondering if it would be somehow possible to load typekit fonts for the editor.
I’m having issues using desktop fonts that might just not display exactly the same as the typekit version.
I believe it would be great if we could ensure fonts are loaded and displayed in the Editor in the same way they are with code. Any thoughts about this?

cc @carolhmj

Our intern has been working on a font selector for the Editor, @PatrickRyan can talk more about it maybe?


You can use any fonts loaded into the scene from typekit. You first need to load the typekit package as you can see in this playground in the first 9 lines of the code. This is code taken directly from Adobe, so you only need to change the typekit ID to the ID used by your package for it to work.

Once the typekit fonts are loaded into the scene, you can simply type the name of the font family you want to use into the parameter input on a text block and it will work. Our intern @amritanarasimhan is working on an update that allows you to have a select menu for available fonts, but we can only test for a loaded font once we know what to test for. So you will still need to input the font family name for the first use of the font. This is a web limitation as there is no way for us to just ask for what fonts are available. But if we have the font name, we can test that it is loaded.

This feature is still in development, but it should be available in the beta soon.

1 Like

Thanks, that’s awesome. Didn’t realize it was already there and loads from the PG. Amazing job.
I did of course load the typekit in the PG but I also had the desktop version installed in my system. Reason why I thought it was not in. Yet, it is. :heart_eyes: :stuck_out_tongue:That’s really cool (and would probably deserve a couple of lines in the doc?).
I believe in the case the font (with the same name for font-family) is installed in the system, it likely uses the font from the system, yes?

I’m not certain which version of a typeface would be used if the browser detects that a website loads a font with the same name as one available on the system. I’m guessing it would default to the system font, but I don’t know for certain how the browser would prioritize it since there could be a naming conflict between one loaded from a site and a local font that are not actually the same font. It may determine that the font loaded from the website is closer to the source and use that one, but this is only a guess.

We can certainly go into more details around using custom fonts in the docs in connection with this new PR that is being worked on. The same would be possible if there was a font file stored on the host server and called through CSS using @font-face. Basically, if your site has loaded a typeface, the GUI editor can access it simply by entering it as the property value of the text block’s font family in the GUI editor.

1 Like

I believe we could do this. It’s quite an advanced use of the browser capabilities and I believe is not obvious for common or even advanced users. I think it would deserve this small mention, eventually simply with just a couple of lines of text and a link to loading custom fonts.

1 Like

I think I bounced into one of these conflicts and have some feedback.
I had a ‘magistral-book’ installed in my system that’s not from the official adobe typekit (font-family name ’ magistral’, font-weight ‘book’). When entering ‘book’ in ‘font-weight’ it was using the system version but was unable to handle the size on export. Removing the instruction for ‘font-weight=book’ (thus defaulting to the normal weight of the typekit font) switched to the typekit font and the font was handled normally.

1 Like