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

What is Framer? Join the Community
Return to index
Vaibhav Kanwal
Posted Mar 15 - Read on Facebook

How do you import an external CSS file in Framer Studio?

12 Comments

Joshua Tucker

Hey Vaibhav Kanwal! I'm not super familiar in this area, but maybe I could point you in the right direction?

Inside the index.html file of your Framer project folder, it links style.css from the framer folder. I suppose you could simply add another CSS stylesheet similarly below it?

Vaibhav Kanwal

Joshua Hey thanks for the super human quick reply. I notice the styles are overriden using inline styles when I do this. So, if I apply display:none, the layer has an display:block inline style already applied. I see I will need to use !important to get around it. Any other way?

Joshua Tucker

I assure you I am not lurking day and night (well...), but I try to pitch in when I can :P.

I suppose I should have clarified first, but are you trying to set style to a layer in your Framer project? Depending on the amount, it's possible you can simply style what you want in Framer Studio without the need for an external CSS file. I have worked a little with CSS styling in Framer Studio so I might be able to help you in that regard.

Vaibhav Kanwal

Ok. Thanks! I need the external CSS for my purpose right now for the task at hand. I will use !important for the time being

Joshua Tucker

Cool! Sorry I wasn't able to fully get you situated but keep us updated and cheers on your creation!

Jay Stakelon

There's also Utils.importCSS which appends a style block to the body. If you use it with CSS @import you can bring in external style sheets. I use it to link to Google web fonts for example

Vaibhav Kanwal

thanks Jay. I will use it!

Jay Stakelon

Insert, import, same difference? ;) Yep, insertCSS, my bad

Naema Baskanderi

I'm curious does Utils.importCSS still work? I don't see it in the framer docs

Jordan Robert Dobson

Cc Jonas another mention of importCSS :)

Marc Krenn

People ask about adding stylesheets on a regular basis, so here's a function that does exactly that:

http://share.framerjs.com/ewcwzo9s5mr9/

Read the entire post on Facebook