Summer with Sela Vie Week 3

Have the perfect brand font, but can’t find it in Squarespace’s or Shopify’s font list? Here’s how to add a custom font to your site!

Your Squarespace tip—

Step 1: Obtain Font Files

Choose your desired custom font and download its .woff or .woff2 files.

Step 2: Upload Font Files to Squarespace

Go to the "Custom CSS" section of your Squarespace site's Design settings. Upload the font files into the "Manage Custom Files" area.

Step 3: Add CSS Code

In the Custom CSS editor, insert the following code, replacing 'YourFontName' with your chosen font's name and 'path/to/font.woff2' with the correct file path:

cssCopy code
@font-face {
  font-family: 'YourFontName';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
  /* Additional font properties can be added here */
}

/* Apply the custom font to specific elements */
.your-element {
  font-family: 'YourFontName', sans-serif;
}

Step 4: Apply Font to Elements

Customize your site's CSS to apply the custom font to specific elements by referencing the .your-element class. (For example, h1 to target the primary heading or p for body copy.)

Step 5: Save

Finally, make sure to Save your changes.

Your Shopify tip—

Step 1: Acquire Your Font

Obtain your desired third-party font in EOG, SVG, TTF, WOFF, or WOFF2 formats. Then, on the Shopify dashboard, go to Online Store > Themes > Action > Edit Code.

Step 2: Upload Font Files

On the dashboard, navigate to Assets on the sidebar and select Assets > Add New Asset > Upload. Carefully upload your font files here, ensuring not to alter any existing code.

Step 3: Insert Code into theme.scss.liquid

Open theme.scss.liquid under Assets and paste the following code at the bottom:

@font-face {  font-family: “FONT”;  src: url(‘{{ “FONT.eot” | asset_url }}’);  src: url(‘{{ “FONT.eot” | asset_url }} ?#iefix’) format(“embedded-opentype”),       url(‘{{ “FONT.woff” | asset_url }}’) format(“woff”),       url(‘{{ “FONT.woff2” | asset_url }}’) format(“woff2”),       url(‘{{ “FONT.ttf” | asset_url }}’) format(“truetype”),       url(‘{{ “FONT.svg” | asset_url }} #FONT’) format(“svg”);}

Step 4: Update Code for New Font

Replace “FONT” in the pasted code with your font name, ensuring to maintain any hyphens or underscores. Add or remove lines based on the file types you're uploading (e.g., remove the woff2 line if not uploading a woff2 file). Directly below, add the following code to change desired text types (in this case, headers) and replace “FONT” with your font name:

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: ‘FONT’ !important; }

Step 5: Save

Finally, make sure to Save your changes.

Q&A: Conni Jespersen of Art in the Find

On finding your style and elevating your outfits

Q: How do you find your own sense of style and stick to it?

Owning your sense of style is all about recognizing these 5 key elements: your personality (how would you describe yourself and how can you relate that to what you wear), your lifestyle (what you do (and actually wear) on a day-to-day basis, your personal preferences (what you like and don't like about clothes (necklines, fabric choices, etc), where you live, and what "influences" you. (Here's a blog post on this!) When you have a deeper understanding of these 5 things, sticking to your true style becomes easier to do!

Q: How can I elevate my "mom casual" / athleisure looks to be more work appropriate?

You can elevate a simple outfit by adding/layering with a print, pattern, texture, or color. This is similar to using textures in a room. When you add one or two of these elements to a simple athleisure look (say, adding a printed blazer or a printed bag) it brings life and dimension to a look. (An example of this here.)