Jump to content

Custom font on mobile won't work

Recommended Posts

Site URL: https://www.dilliendevlooonthego.be/

Hi, 

 

I coded a custom font into my CSS but it's not working on mobile. It needs to be the script font that you see on the screenshot of the desktop version. Does anybody know the solution? 

 

This is the code: 

@font-face {
font-family: 'British Shorthair';
src: url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6210f95903ebc7415e52e901/1645279577708/British+Shorthair.otf])
url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f61fd6f35531273caa86/1646589471550/British+Shorthair.ttf])
url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f625817f540156f427ee/1646589477273/British+Shorthair.woff])
url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f629c3dd7d61533a9bad/1646589481621/British+Shorthair.woff2])}

h1 {
font-family: 'British Shorthair';}

h2 {
font-family: 'British Shorthair';}

h3 {
font-family: 'British Shorthair';}

h4 {
font-family: 'British Shorthair';}

IMG_7891.PNG

Schermafbeelding 2022-03-08 om 09.53.07.png

Link to comment
32 minutes ago, studioearl said:

Site URL: https://www.dilliendevlooonthego.be/

Hi, 

 

I coded a custom font into my CSS but it's not working on mobile. It needs to be the script font that you see on the screenshot of the desktop version. Does anybody know the solution? 

 

This is the code: 

@font-face {
font-family: 'British Shorthair';
src: url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6210f95903ebc7415e52e901/1645279577708/British+Shorthair.otf])
url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f61fd6f35531273caa86/1646589471550/British+Shorthair.ttf])
url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f625817f540156f427ee/1646589477273/British+Shorthair.woff])
url([https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f629c3dd7d61533a9bad/1646589481621/British+Shorthair.woff2])}

h1 {
font-family: 'British Shorthair';}

h2 {
font-family: 'British Shorthair';}

h3 {
font-family: 'British Shorthair';}

h4 {
font-family: 'British Shorthair';}

IMG_7891.PNG

Schermafbeelding 2022-03-08 om 09.53.07.png

Hi, the issue was with the way the css code was formatted. Try this one and let me know how it goes 🙂 

@font-face {
  font-family: 'British Shorthair';
  src: url('https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f625817f540156f427ee/1646589477273/British+Shorthair.woff') format('woff'),
    url('https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f629c3dd7d61533a9bad/1646589481621/British+Shorthair.woff2') format('woff2');
}

Please give this a 👍 if it helps

Link to comment
59 minutes ago, Jia said:

Hi, the issue was with the way the css code was formatted. Try this one and let me know how it goes 🙂 

@font-face {
  font-family: 'British Shorthair';
  src: url('https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f625817f540156f427ee/1646589477273/British+Shorthair.woff') format('woff'),
    url('https://static1.squarespace.com/static/612a200624ebe52c8f672d21/t/6224f629c3dd7d61533a9bad/1646589481621/British+Shorthair.woff2') format('woff2');
}

Great! Thank you, the issue is resolved! 

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.