nininono Posted February 27 Share Posted February 27 Hey all, I'm simply trying to add two fonts to a single line of text in my portfolio grid. Currently, all text is 'Aileron-Light' e.g. Food and Drink 001, Fashion and Beauty 002 as per image attached. To highlight the title and give more emphasis, I am trying to make Food and Drink in 'Aileron-Light' and 001 in 'Aileron-Ultralight' so it looks more like this; Food and Drink 001 Currently I've added the custom font 'Aileron' and used the below code; Many thanks in advance! Paul 🙂 @font-face { font-family: 'Aileron-Ultralight'; src: url(https://static1.squarespace.com/static/65de47ba4bd0cf325ccb79b9/t/65de64f5192e861b98637ea0/1709073653154/Aileron-UltraLight.otf); } @font-face { font-family: 'Aileron-Light'; src: url(https://static1.squarespace.com/static/65de47ba4bd0cf325ccb79b9/t/65de54eafaac5e7931840005/1709069547949/Aileron-Light.ttf); } .portfolio-title { font-family: 'Aileron-light' !important; } Link to comment
KwameAndCo Posted February 28 Share Posted February 28 8 hours ago, nininono said: To highlight the title and give more emphasis, I am trying to make Food and Drink in 'Aileron-Light' and 001 in 'Aileron-Ultralight' so it looks more like this; Link to the website please. You're going to need some javascript as well as CSS here, so hopefully you're on a business plan. But link the site and tag me and I can help. Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
nininono Posted February 28 Author Share Posted February 28 Thank you @KwameAndCo I am on a business plan and keen to learn more CSS so all good. Below is the info, appreciate your help! Here's a link to the website https://grape-bellflower-8yng.squarespace.com/ The password is '123456' Link to comment
KwameAndCo Posted February 29 Share Posted February 29 Seems like you've solved it using an ::after element? You may wish to consider automating the numbering fo make it a bit more future proof. Saves you CSS and doesn't break if you change the link like you curently have it - so much less maintenance. I think I wrote a snippet for it previously that I was going to put up for free on my plugin store. Shall I tag you if I find it? Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
nininono Posted February 29 Author Share Posted February 29 7 hours ago, KwameAndCo said: Seems like you've solved it using an ::after element? You may wish to consider automating the numbering fo make it a bit more future proof. Saves you CSS and doesn't break if you change the link like you curently have it - so much less maintenance. I think I wrote a snippet for it previously that I was going to put up for free on my plugin store. Shall I tag you if I find it? @KwameAndCo I didn't solve it as such, this was just a work around. Ideally I would like to make it all in the same line, as opposed to 2 lines. If you have a solution it would be greatly appreciated! Link to comment
tuanphan Posted March 2 Share Posted March 2 @nininono You can add this CSS code under to make both same line h3.portfolio-title { display: flex; } h3.portfolio-title:after { padding-left: 5px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KwameAndCo Posted March 5 Share Posted March 5 On 3/3/2024 at 6:35 AM, tuanphan said: @nininono You can add this CSS code under to make both same line h3.portfolio-title { display: flex; } h3.portfolio-title:after { padding-left: 5px; } I would simplify: h3.portfolio-title { display: flex; gap: .5rem; } Adjust the gap as you see fit. tuanphan 1 Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment