Custom Font CSS issues

Site URL: https://www.loveofmacs.com

Hi everyone. I am currently trying to upload a custom font to my site using CSS. The font files were purchased from Creative Market and then I used Font Squirrel to create the css stylesheet. The woff and woff2 files have been uploaded under 'manage custom files'. When I upload, it makes the font appear as Times New Roman (the font is called Versailles).  

Here is the CSS I'm using

@font-face {
    font-family: 'versaillesregular';
    src: url('versailles-regular-webfont.woff2') format('woff2'),
         url('versailles-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'versaillesregular';
    src: url('versailles-regular-webfont.woff2') format('woff2'),
         url('versailles-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

h1 {font-family: 'versaillesregular';}

Hey @tuanphan , do you mind helping me with a similar (but kinda different) issue? 

My font on my website won't show on any other devices (except for my computer, the one with the font loaded to it already). I uploaded them via the Custom File Manager and linked them:

@font-face {
  font-family: 'Chap', sans-serif;
  src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff),
url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf);

}


@font-face {
  font-family: 'Sneak-Regular', sans-serif;
  src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff),
url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf);
}


h1, h2, .image-title.sqs-dynamic-text h4 {
   font-family: 'Chap', sans-serif !important;
}

a, p, h3, h4, h5, h6, .sqs-block-collectionlink a, .sqs-block-button-element, .header-title:after, .sqs-block-quote blockquote, input {
  font-family: 'Sneak-Regular', sans-serif;
}

I check on someone else's device and I can't see any of the custom fonts, but since I'm preloading them they're showing up in the Dev Tools Application area. If I don't preload them, then they don't show up in the Dev tools at all. But either way the font doesn't show up on the website. 

preloaded in the Code Injection Header area:

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff" as="font" type="font/woff" crossorigin="anonymous">

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf" as="font" type="font/ttf"  crossorigin="anonymous">

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff" as="font" type="font/woff"  crossorigin="anonymous">

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf" as="font" type="font/ttf"  crossorigin="anonymous"> 

Maybe its something wrong with the font links but I don't get whats going on. Any help is appreciated!!

https://thehighguide.squarespace.com/
pw: guide

On 7/12/2021 at 3:19 AM, dearnaomichan said:

Hey @tuanphan , do you mind helping me with a similar (but kinda different) issue? 

My font on my website won't show on any other devices (except for my computer, the one with the font loaded to it already). I uploaded them via the Custom File Manager and linked them:

 

@font-face {
  font-family: 'Chap', sans-serif;
  src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff),
url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf);

}


@font-face {
  font-family: 'Sneak-Regular', sans-serif;
  src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff),
url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf);
}


h1, h2, .image-title.sqs-dynamic-text h4 {
   font-family: 'Chap', sans-serif !important;
}

a, p, h3, h4, h5, h6, .sqs-block-collectionlink a, .sqs-block-button-element, .header-title:after, .sqs-block-quote blockquote, input {
  font-family: 'Sneak-Regular', sans-serif;
}

 

I check on someone else's device and I can't see any of the custom fonts, but since I'm preloading them they're showing up in the Dev Tools Application area. If I don't preload them, then they don't show up in the Dev tools at all. But either way the font doesn't show up on the website. 

preloaded in the Code Injection Header area:

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff" as="font" type="font/woff" crossorigin="anonymous">

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf" as="font" type="font/ttf"  crossorigin="anonymous">

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff" as="font" type="font/woff"  crossorigin="anonymous">

<link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf" as="font" type="font/ttf"  crossorigin="anonymous"> 

 

Maybe its something wrong with the font links but I don't get whats going on. Any help is appreciated!!

https://thehighguide.squarespace.com/
pw: guide

Hi. Which element doest work?

On 7/9/2021 at 11:53 PM, Kayleigh0105 said:

Site URL: https://www.loveofmacs.com

Hi everyone. I am currently trying to upload a custom font to my site using CSS. The font files were purchased from Creative Market and then I used Font Squirrel to create the css stylesheet. The woff and woff2 files have been uploaded under 'manage custom files'. When I upload, it makes the font appear as Times New Roman (the font is called Versailles).  

 

Here is the CSS I'm using

@font-face {
    font-family: 'versaillesregular';
    src: url('versailles-regular-webfont.woff2') format('woff2'),
         url('versailles-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'versaillesregular';
    src: url('versailles-regular-webfont.woff2') format('woff2'),
         url('versailles-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

h1 {font-family: 'versaillesregular';}

Do you want to fix these?

Site URL – https://www.loveofmacs.com/

1. (Desktop/Tablet – Flavor) Text “s” in “favorites” is cut to the next line.

https://www.loveofmacs.com/flavors

2. (Mobile/Tablet – Homepage) Can’t click icon messenger.

https://www.loveofmacs.com/

3. (Tablet – Footer) Icon messenger overlap phone number.

https://www.loveofmacs.com/

4. (Tablet – Footer) Email is cut into 2 lines.

https://www.loveofmacs.com/

@tuanphan You answered my question on the question I posted! I accidentally had "san-serif" in my @font area. Fonts are all working now!