Showit Website Design for Baby Sleep Coach, New York
Riki purchased a Tonic Site template but quickly realized that once she started entering in her text and photos, it lost the designer look that she loved so much about Tonic sites. She hired me to bring back that designer look, make sure things were easy to read and tidy up text. I not only brought back the designer look, but created new sections and new designs that matched her upscale vibe she was looking for. From there, I incorporated her 3 freebies from Flodesk. I also designed her PDF guides in Canva so she could edit them if she needed to.
Website Design for Baby Sleep Coach, New York
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
Showit Website Design for Wedding & Family Photographer, San Fransisco CA
Tiffany knew she wanted a Showit website but wanted to start with a template. I helped her choose a good template as a base for her design. From there, I created her logo, color palette and create a new style of the website that fit her. I included galleries and slideshows to feature her photo sessions and designed easy to navigate.
Website Design for Photographer Bay Area, CA
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
Showit Website Design for Wedding & Family Photographer, Houston TX
White label web design for Kaitlynn Lazarus photography in Houston, TX. I worked with Mac Ryan design to help her come with this dark and moody/vintage vibe she was looking for.
Website Design for Photographer Houston TX
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
Showit Website Design for High-End Hair Salon in Houston, TX
Kaleido Hair did everything right. They hired a copywriter to write their copy. They hired a photographer to do the photographery and a brand designer to design their logo. I was hired by Mac Ryan Studio to design their website using Showit. With such great assets it was a joy to create the beautiful layouts that would showcase their upscale hair salon. Overall, the client was very happy with the design and complimented how well it fit their brand.
Website Design for Hair Salon
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
Showit Sales Page Design for Women’s Perimenopausal Health
Jennifer Pickett has launched a new course program and she needed an amazing sales page to tell the world about it. She worked with a copywriter for the text and a branding designer for the logo and sub logos. I was hired to build out the sales page design in Showit. Jennifer was great to work with and I can’t wait to see all her success in helping women going through perimenopause and menopause. She has a YouTube channel and Podcast that I also worked on her thumbnails and banners to match her brand.
Showit Website Design for Women’s Health Coach
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
Squarespace Website Design for Tutoring Program, Chicago
Windy City Scholars provides personal tutoring in the Chicago area. With a logo already designed, Chauncey needed a website that would appeal to the high-end market of the area. I created a color palette for his website, used his feather icon as texture in the background and curated photos that fit his ideal audience.
Website Design for Educational Tutoring Program
★★★★★
"Sharon did an outstanding job on my Squarespace site! Her attention to detail, creative input, and technical expertise truly set her apart. She understood my vision and executed it flawlessly, making the entire process smooth and efficient. I highly recommend Sharon to anyone looking for top-notch Squarespace design and development. Couldn’t be happier with the results!" – Chancey
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
Squarespace E-commerce Website Design for Christian Author Coaches
The challenge that Kingdom Creativity faced was combining 3 different branches of their business into one main website. They needed a lot of cleaning up of the navigation and pages to make things easier to find. I created textures, patterns and curated stock photos to fit their overall brand. I built their membership platform through Squarespace memberships. I also created their digital products and cover graphics for their workshops. I created and connected a Printful shop so they could sell branded merch. I also setup their Squarespace email campaigns so they could automate emails and collect email addresses.
Website Design for Christian Author Coaches
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
Squarespace Website Design for BMX Non-Profit Organization, Texas
BMX Local is a non profit organization that helps at-risk youth obtain, not only real BMX bikes, but mentorship and skills training, giving them a place to have fun as well as father figures in their life to prepare them for adulthood. It was an honor to help BMX local and the awesome mission they have to reach youth in the North Dallas area.
Website Design for Nonprofit, Texas
Want your own custom website?
Want a website like this one? Fill out the inquiry form and let’s set up a time to chat about your goals.
How to Add Custom Fonts in Squarespace 7.1
I love that anyone can get a great-looking site up quickly without any custom code. There are tons of great fonts within the Squarespace platform that I have used on high-end designs. However, sometimes a custom font will really uplevel the entire site with just a new font.
In this guide, we'll walk through the process of implementing custom fonts on your website, using Squarespace 7.1 as our platform.
Why Custom Fonts Matter
Before diving into the technical aspects, let's briefly discuss why custom fonts are worth the effort. Custom fonts have the potential to transform the look and feel of a website, instantly elevating its visual appeal. By deviating from standard system fonts, designers can create a unique brand identity and establish a more memorable and engaging user experience.
Step 1: Acquiring Legal Fonts
Before proceeding with custom font implementation, it's crucial to ensure that you have the legal right to use the fonts of your choice. This entails purchasing font licenses from reputable sources such as Adobe Fonts, Creative Market, or directly from font foundries. Remember, using unlicensed fonts can result in legal issues, so it's essential to prioritize compliance.
Some of my favorite places to purchase unique fonts that will stand out on a website are Adobe Fonts, MyFonts.com, CreativeMarket.com or Envato Elements
Step 2: Accessing Custom CSS in Squarespace 7.1
Once you've acquired the necessary font licenses, the next step is to access the Custom CSS section in Squarespace 7.1. Follow these steps:
Log in to your Squarespace account.
Navigate to the "Pages" section.
Scroll down to "Website Tools" and select "Custom CSS."
Step 3: Implementing Custom Font CSS Code
Now, let's dive into the process of implementing custom font CSS code. Here's a breakdown of the key steps involved:
Uploading Font Files: Begin by uploading the custom font files to your Squarespace account. This typically involves dragging and dropping the font files into the designated folder.
Here is my CSS code for adding custom fonts to Squarespace 7.1. You can also watch the video tutorial as well.
Custom Fonts in Squarespace 7.1:
Copy the following code into the custom CSS section of your website.
Delete text within the parenthesis that starts with “unique-url-for-your-file”
Insert cursor and your custom font should show up in drop down or click on the file to make it insert into the code
Replace ‘font-name’ with the name of your font (it does not need to be exact)
Replace the ‘font-name’ in your h1, h2 and h3 sections with your new font name
Adding Italics (Optional): If desired, you can also incorporate custom italic versions of your fonts by uploading separate font files and modifying the CSS accordingly.
“//Custom Fonts Squarespace//
@font-face { font-family: ‘font-name’; src: url(unique-url-for-your-file: click the file in your custom file folder to get this url) }
//Heading One Font//
h1 { font-family: ‘font-name’, alternative-web-safe-font; }
//Heading Two Font//
h2 { font-family: ‘font-name’, alternative-web-safe-font; }
//Heading Three Font//
h3 { font-family: ‘font-name’, alternative-web-safe-font; }
//Normal Font//
p { font-family: ‘font-name’, alternative-web-safe-font; }
//Quote Font//
.sqs-block-quote blockquote { font-family: ‘font-name’, alternative-web-safe-font; }
//Quote Source Font*//
.sqs-block-quote .source { font-family: ‘font-name’, alternative-web-safe-font; }”
Tips and Best Practices
Organization: Keep your custom CSS codes organized and easily accessible for future reference. Consider storing them in a notes app or a dedicated folder for quick access.
Testing and Iteration: As with any web design task, implementing custom fonts may require some trial and error. Don't hesitate to test different fonts and configurations until you achieve the desired results.
Documentation: Save tutorials or guides that you find helpful, such as this one, for future reference. Documentation can be invaluable, especially when revisiting tasks after some time has passed.
Conclusion
In conclusion, custom fonts can be a game-changer for your website's design, allowing you to create a more visually appealing and memorable online presence. By following the steps outlined in this guide and experimenting with different font options, you can take your website to the next level. Remember to prioritize legality, organization, and testing throughout the process. Happy designing!
Watch the Video Tutorial on how to add custom fonts in Squarespace 7.1
You May Also Like:
