Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
SuzyO

Adding Custom Fonts to Image Layout Block

Question

Posted (edited)

Hey Guys,

I am really stuck with adding custom fonts to some image Layout Blocks that I have added to my page and hoping for some help.

I have been using custom CSS code to add the custom fonts, however, I am then unable to apply this font to the image layout block header font. I have tried using the following code:

.sqs-block-image .image-caption p { font-family: Butler;}

which unfortunately has not worked.

Any advice would be greatly appreciated!

Thanks,Su

Edited by SuzyO
Initial Revision

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

Add an image block to your page, and select one of the design styles. Tweak your block in Style Settings (now Site Styles). This is a good idea, should your custom CSS fail for whatever reason.Upload a custom font to your Squarespace website.Paste the following code into your Custom CSS area.// Image Block Poster Custom Font.sqs-block-image .design-layout-poster .image-card-wrapper p { font-family: "FONT NAME HERE" !important }Not using a poster design on your image?mply replace poster in in .design-layout-poster and Image Block Poster Custom Font with overlap, card, stack or collage

Western Potash Customer ServiceReplace FONT NAME HERE with the font-family name you set in Step 2. Be sure to keep the quotes.This will set ALL the text in your image block to the custom font.To set the title only, replace .image-card-wrapper with .image-titleTo set the subtitle only, replace .image-card-wrapper with .image-subtitleHit Save.For multiple styles, repeat the process for each image block design, adding more fonts and updating the code as needed.If necessary, return to Style Settings and tweak the font sizes for your new custom font.

Share this post


Link to post
  • 0

@tuanphanThank you for your message! Do you mean the link to my website? If so this has not been made live yet, since I want to try and get the desired look of it first - which I am unable to do at the moment.

As for the code you attached, it unfortunately is still not working.

Share this post


Link to post
  • 0

The Post Is A Written In A Very Good Way For You. I Appreciated What You Have Done here. I am always searching for informative information like this.


Hello My name is Karl Urban. i am a webdeveloper and Designer in Wordpress, php, .net and more. [wetalktowendys][1] [1]: http://wetalktowendys.com/

Share this post


Link to post
  • 0

Thank you for providing these details.


I am a Web developer experienced in PHP & MySQL [web programming][1], clean W3 compliant XHTML/HTML/CSS coding and Javascript/Jquery/AJAX programming. [1]: http://thestorelocator.co.uk

Share this post


Link to post
  • 0

Great Post !


I am a Web developer experienced in PHP & MySQL [web programming,][1] clean W3 compliant XHTML/HTML/CSS coding and Javascript/Jquery/AJAX programming. I have 100% job success on Upwork. [1]: http://thestoreguide.co.nz/

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...