How to install purchased fonts?

Hello,

I purchased my own typefaces that I would like to use for my portfolio website. How can I install the purchased fonts?

Thank you!

Hi,

Which elements you want to apply custom font?

Also which font file format do you have?

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';
}

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

then choose font files from your pc

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

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