Experience hosting typekit css?

Need help
1

Does anyone have experience hosting Adobe Typekit fonts in bubble apps? Freaking adobe stuff is so convoluted, but dang do they have some nice fonts :frowning:

3 Likes
2

Do you get a URL to the font file from them?

1 Like
3

well not exactly…they give the option of declaring selectors for css class, id and html tags then “add that to my markup”

or I can insert some tags into my html.

also, it has to be the html that my URL is associated with, which I declare in typekit.

there’s an “idobe id” associated with usage. creative cloud limits the amount of urls I can host typekit fonts on. unless of course I upgrade to the shiny package for like a million dollars a month

1 Like
4

Also interested in using typekit in case anyone has a solution…

2 Likes
5

I up-vote this

6

I know this is a few months old, but I’m interested as well! Any luck with typekit?

7

This one requires working with a bit of code, so you’ll need a code editor. I use visual studio code but any will do.

You’ll also need a typekit subscription (they have a free tier, which is what I’m using - it works just fine)

  1. On typekit, find the font you want to use:

Pasted image1690×797 94.8 KB

  1. Create a kit with the desired font:

Pasted image1703×753 85.5 KB

2.1) Here we add our domain name. For this walkthrough, I’ve used only one domain, version-test. You can have up to ten domains on one kit though:

Pasted image780×609 24.9 KB

  1. Copy the two lines of code, tags and everything. Press continue and publish your kit:

Pasted image757×454 27.1 KB

Pasted image785×670 59 KB

  1. In your Bubble app, navigate to Settings > SEO & Metatags. Paste the embed code into the Script/meta tags in header field.

Pasted image1875×881 53 KB

  1. Now, open up your text editor and create a new file:

5.1) Save the file as a .css file and descriptive file name:

Pasted image877×653 12.7 KB

  1. Add the following code into your css file.

    @font-face {
    font-family: “.tk-copal-std-decorateddelete”;
    src: url()
    }

6.1) The font-family should be the “Selector” located in your typekit kit.

Pasted image804×340 37.2 KB

  1. After you save your new css file, move back to the Bubble editor and build an “Upload file” element anywhere on your canvas. Upload the new css file with the “static file” option. Copy the “dynamic link”:

Pasted image971×536 42.9 KB

  1. Now, back in your code editor, paste the dynamic link in between the parenthesis in the src: url() part. You must also add https: to the beginning of the dynamic link address

Pasted image1004×224 16.4 KB

  1. After you save the modified CSS file containing the URL, return to your Bubble editor, clear the initial static content in your File Uploader element and upload the modified css file.

  2. Return to the Settings Tab > General/Design. Paste the new dynamic link you’ve copied into the css style path. This time, there isn’t any need to add the https:

Pasted image910×530 29.4 KB

  1. In the Font name field, add the name of the font. You can find it in typekit here (leave the quotes off):

Pasted image710×230 19.2 KB

  1. Add your font.

  2. Back on the canvas, you’ll find you can now select your new font:

Pasted image1008×389 23.7 KB

But wait, it’s not displaying on the canvas?!? Argghhhh…

…Psych! Just preview the app and it loads:

Pasted image793×847 56.2 KB

Anyways, I hope this is useful. If there are any mistakes in the walkthrough, let me know. If you have any questions or something’s not clear, let me know. If your app blows up, please let me know, because that’d be funny :sweat_smile:

11 Likes
8

So great, @skylershelton, thanks! Looks like the key to the whole thing is pasting the two lines of Typekit-generated script tags in the “SEO & Metatags” section (I never would have found that).

Two questions:

  1. If you can add arbitrary code to the head of the document, is it necessary to upload a static CSS file? Couldn’t you just write the same @font-face declaration under the script tags you just added?
  2. If it is necessary as you describe, is there any other way to upload an arbitrary file to Bubble, or do you have to create a file upload input on the canvas somewhere every time?

Thanks man!

1 Like
9

@nathan.huening Thanks for the questions, apologies for taking awhile to answer!

Regarding your first question, although that’d be much simpler, it unfortunately wouldn’t work. The “SEO & Metatags” section essentially opens up the <head> tag. Because this is HTML, and @font-face is CSS, it wouldn’t work. We could likely put a <link rel href> there and reference the stylesheet containing @font-face , but Bubble needs to know we’re adding a font so that it can be displayed and selected within the editor’s font drop down menu.

Basically my best guess is that the “add font” feature does both those two things (adding the proper tag in the html and adding the font name into the drop down). The css file link completes the href='font.css'.

Exploring other ways to utilize the head tag here is something I’ve been doing a lot of and I plan on sharing some of the things I’ve done later this month.

To your second question, the file upload element, along with the image upload and possibly others, is the only method I’m aware of for uploading to the AWS S3 object storage associated with your app.

I’m pretty sure that the S3 storage is referenced by app, so that once the file is uploaded, it only gets deleted upon deletion of your application. In other words, once you have the URL it’s fine to delete the element. It’s a pretty slick way to access AWS S3 :smiley:

As an aside, I’m no Bubble guru. This is the way I approach it - if you or anyone else has an alternative/better method, let us know!

10

If the “SEO & Metatags” section just exposes the <head>, couldn’t you just as easily include custom CSS? Plese do correct me if I’m wrong, but I do stuff like this all the time:

`

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } body { font-family: 'MyWebFont', Fallback, sans-serif; } ` Or whatever. Like, you can put style rules in the head of a document just as easily as you can `` to an external stylesheet. You'd have to include it on every page that uses the font since it's document-specific (not included site-wide), but wouldn't that work? Am I totally wrong?

Can’t wait to see your other experiments!

1 Like
11

I’m pretty sure that wouldn’t work. You need to have a stylesheet and the font name to add the font into the bubble editor anyway, so if you write the css in the head or you write it in a css file and upload it, it’s the same idea. I’m thinking it might be possible by using the exposed tags for SEO purposes feature to declare the rules, but it wouldn’t be practical - it’s far easier to just select the font family from the drop down and be on a merry codeless day.

I’ll revisit it later if no one else does but for now I’m content

1 Like
12

Does it work if you call the font before the css file? That should allow you to use the css and have the font referenced in the editor.