How to Add Custom Font to your Squarespace Site

One of our most frequent projects for clients is website building. Our building and hosting platform of choice is Squarespace because it is super efficient and, of course, the templates are gorgeous. The only downside of having such superior design is that it is a lot more rigid in comparison to Expression Engine or Wordpress.

Recently, a client asked for a custom font on their new website, which isn't an option within the Squarespace design. Luckily our Squarespace smarty-pants Will found a hack! And it's surprisingly straight forward. 

Check it out... and happy website building! 

Step #1: Locate your font and make sure it's formatted.

In order for your custom font to be displayed, it needs to be in the right formats. Many fonts you can download online already come as webfont (three separate file types that define and format font for web usage) but most are only .tff files.

You need three separate font files in these formats: .tff, .eot, and .woff. 

If you only have one of those file types, you can use a Webfont Generator which will convert your single file into the three types you need. Just download the files and put them into a folder. 

Step #2: Upload the font files to Squarespace. 

In Squarespace, go to the page you want to modify. Click through Design > Custom CSS. 

At the bottom of the code injection window, there is a button that reads "Manage Custom Files". Click that button and upload the 3 font files. 

Step #3: Inject Code

Copy the following code and paste it into the code injection window.

Make sure to replace FONTNAME with the name of the font as it is labeled. Leave the quotes.

Remove FONTURL and replace it by clicking on the filetype in the Manage Custom Files window. Make sure you remove the "http:" before each url. 

@font-face {
    font-family: 'FONTNAME';
       src: url('FONTURL.eot'),
    font-weight: 400;

The next part is tricky as the name for different parts of the website vary from template to template. The code below should replace all the text font across the entire website.

The first part of code changes the navigation and page content text to your font. The second part changes the tag line under the site header.

#header * {
   font-family: 'FONTNAME';
   font-weight: 400

 #header .site-tagline {
    font-family: 'FONTNAME';
    font-weight: 400;

You can also change specific header fonts by replacing the asterisk* with "h1" for heading 1 and so on. As I mentioned before, names for different parts of the website vary based on the template. So, if any of the code above fails to change anything, you might have to look up the correct names on Squarespace's support site.

After you've put the code in correctly, your custom font should now be displayed across the site.

Earth Day 2017

Since Oniracom's inception, a major part of our practice as a company is being environmentally friendly. As a result, we are big supporters of Earth Day and several other sustainability projects. This weekend marks our 7th Santa Barbara Earth Day collaboration with the Community Environmental Council.

For many companies the cost of going green can put some places out of business, but as more businesses join the movement, it is becoming easier. The market for environmentally friendly products has skyrocketed over the last decade. Consumers have become much more aware of their negative impact on nature and are choosing sustainable products more often every day. 

At Oniracom, we strive to be as environmentally conscious and sustainable as possible. We reduce our use of plastics by utilizing water bottles and tote bags. We encourage each other to walk or bike to places close by as well as carpooling to further locations. Ultimately, we all benefit from the peace of mind we experience by doing our part in improving and preserving our environment.

Oniracom Presents a new logo for Data Hardware Depot!

Our in-house lead designer, Keir DuBois recently helped upgrade and refresh the color scheme and design for Data Hardware Depot's logo. They decided to move away from using their full company name by shortening it to DHD. They wanted to make the letters green with the "H" standing out to emphasize their focus on hardware products, and tie in their environmental connections with color. 

Ping pong paddle branded with DHD's newly designed logo. 

Ping pong paddle branded with DHD's newly designed logo. 

DHD provides refurbished communications network infrastructure equipment, as well as a suite of Professional Services to manage all of your forward and reverse logistics, asset recovery projects, and de-installation needs.

Photo Shoot Mondays - Santa Barbara Bar

Mondays don’t typically have the reputation for being the best day of the week, but yesterday, we had a great day! Oniracom spent all day with our new client, the Santa Barbara Bar, to do a lifestyle photo shoot in the beautiful Santa Barbara. Working with the talented photographer Lexus Gallegos, we are creating a campaign for the tasty and nutritious bars. We are excited to be working with this amazing bar brand that’s local to our hometown!

Santa Barbara Bar founder, Peter Gaum has owned a wholesale bakery in Santa Barbara for 20 yeas. He created the bars as a delicious and healthy snack for friends and family, but it has turned into a local phenomenon, taking the area by storm. Not only are the bars full of flavor, but they are also gluten-free, a good source of protein and fiber, and contain no added soy protein of refined sugars. Right now there are three flavors: Coconut Almond, Peanut Chocolate Cherry, and Cranberry White Chocolate. We thank Santa Barbara Bar for stocking Oniracom full of these delicious bars, because we can’t stay out of the kitchen!

Check out the Santa Barbara Bar website here to see where you can find the bars-in store (or order online). Below are some of pictures from our photo shoot, check them out!

Staff Picks: Favorite Apps

We’ve finally done it. Each staff member chose their favorite apps that they can’t live without. Take a look at who chose what, and click on each app to see why they rock! 

StitcherInstagram and Evernote.  

Prismatic and Sonos.

theScoreTwitter and Google Maps

One Bus AwayInstagram and REI Snow Report

DropboxInstagram and MLB AtBat

InstagramAfterlight and Google Maps

InstapaperTwitterific and Instacast

UberGoogle Maps and Pandora

Family FeudRdio and Snapseed

YouTubeFacebookTumblr and Pinterest… you know, for being stuck in waiting rooms and planning weddings.