Jump to content

CSS - Changing fonts in portfolio

Recommended Posts

  • Replies 25
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
12 hours ago, tylernkime said:

I am looking for the same help, how did you do it?


If you share link to your site, we can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment


So I downloaded the WOFF version of the font and I am back at square one... 

What is the correct code from star to finish that I need to get this font to be in my portfolio titles?

I have went back through and tried all of the different codes you have given me but I am at a road block right now. I know I am slightly off in some way, but I am not sure where.  Here is the image of what I have so far.

Screen Shot 2020-05-11 at 12.08.54 PM.png

Link to comment

@tylernkimeI went ahead and purchased the font and yes, there are issues with it.  It keeps reverting to a web-safe option. The foundry nicely provided me a couple of updates to try out with no success thus far; things are currently back in their hands. I have to say it's a nice font and I discovered the same foundry has one other font of interest to me. Hopefully. we get it working. 


Link to comment

@tylernkimeHave it working with thanks to MADE: Use the otf font which is located in their folder marked 'desktop'. You may need to ask the company madetypeinfo@gmail.com for an updated font file, as you'll notice that my otf version references woff2 in the below sting which appears different to your original file. My code lines are below with Youtube video you can follow. 

The code is: 

@font-face {
    font-family: 'bruno';
    src: url('https://static1.squarespace.com/static/5e04314e1e03733084a0d51a/t/5eba88d1b4728154f2f0a428/1589283026214/Bruno.otfbruno-webfont.woff2');
h3 {font-family: 'bruno'; font-style: italic; font-size: 50px;}

.portfolio-text > h3 { color: blue!important; font-size: 30px!important;}


again, to apply the font to all your site h3s  you do not need to use last code line above. The last line of code targets your h3 header in the portfolio page only. 

- John


Edited by JOHNMD


Link to comment


So I contacted them and they gave me all the correct files but It is still not working on the portfolio titles.

Not sure what I am doing wrong.  The sent me the updated folder but as you can see in the screen shot there is no "desktop" folder.  I used the otf font that you can see below but it did not have the woff2 refernece in it as yours does.

We are so close to figuring this out but I am not sure what to do.

Screen Shot 2020-05-12 at 11.10.39 AM.png

Screen Shot 2020-05-12 at 11.10.30 AM.png

Screen Shot 2020-05-12 at 11.10.12 AM.png

Screen Shot 2020-05-12 at 11.09.59 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.