Jump to content

How to install purchased fonts?

Recommended Posts

  • Replies 3
  • Views 504
  • Created
  • Last Reply

Top Posters In This Topic

I want to apply the custom fonts to headings and paragraphs. I have two web fonts, Canela and Cosmica. Right now, Canela font isn't working. Please see below coding and thank you for your help!

@font-face {
  font-family: 'Canela Web';
  src: url('Canela-Thin-Web.woff2') format('woff2'),
       url('Canela-Thin-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

.Canela-Thin-Web {
  font-family: 'Canela Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Cosmica';
  src: url('Cosmica-MediumItalic.woff2') format('woff2'),
       url('Cosmica-MediumItalic.woff') format('woff');
  font-weight:  500;
  font-style:   italic;
  font-stretch: normal;
}

.Cosmica-MediumItalic {
  font-family: 'Cosmica';
  font-weight:  500;
  font-style:   italic;
  font-stretch: normal;
}


@font-face {
  font-family: 'Cosmica';
  src: url('Cosmica-Medium.woff2') format('woff2'),
       url('Cosmica-Medium.woff') format('woff');
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

.Cosmica-Medium {
  font-family: 'Cosmica';
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

h1, h2, h3, h4 {
font-family: 'Canela Web';
}
p {
font-family: 'Cosmica';
}

Link to comment

Hi,

I think the current font works on Your computer only, If you check on another pc, you will see it doesn't work.

In the code, you need to declare exact link to font file.

First, upload font file to your site, next, replace these lines (bold line) with font file url

Quote

@font-face {
  font-family: 'Canela Web';
  src: url('Canela-Thin-Web.woff2') format('woff2'),
       url('Canela-Thin-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

Do similar with another font

--

How to upload font

Design > Custom > Click Manage Upload Files

image-asset.png?format=1000w

then choose font files from your pc

After uploading, click font file, the url will appear, cut it & paste to above code

image-asset.png?format=1000w

Screenshots: https://www.kayleighnoele.com/

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

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.