Jump to content

Adding custom font (that supports Greek language)

Go to solution Solved by Ziggy,

Recommended Posts

Posted (edited)

Hi there, 

I am trying to upload a custom font that supports Greek characters as a section of my website is in Greek (the subpages under "GR" on the landing page.)
I have uploaded a ttf. font (the font file is titled "ZonaProHairline.ttf" and am also using the following code in Custom CSS: 

@font-face {

font-family: ‘ZonaProHairline’;

src: url(’https://static1.squarespace.com/static/6665af44db228a73d1cdb0e0/t/66840f3d3a57d970a322b440/1719930688659/ZonaProHairline.ttf’)

format('truetype');

  }

h1, h2, h3, h4, p {

  font-family: ’ZonaProHairline’;

}

However the font doesn't seem to display in any section of my website, in none of the headers (h1, h2, h3, h4) or paragraphs (p).
What am I missing? 

Thanks for your help 

Edited by harry_
Link to comment
  • Solution
21 hours ago, harry_ said:

What am I missing? 

The quote marks you are using are incorrect, replace your code with this:

@font-face {
  font-family: 'ZonaProHairline';
  src: url('https://static1.squarespace.com/static/6665af44db228a73d1cdb0e0/t/66840f3d3a57d970a322b440/1719930688659/ZonaProHairline.ttf')
    format('truetype');
}

h1, h2, h3, h4, p, .sqsrte-large, .sqsrte-small {
  font-family: 'ZonaProHairline';
}

I've also added in the code for paragraph 1 and 3.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

One more thing, it's showing the new font on all headings and paragraphs of my website, but it's not applying it to the site title on the header bar. Do I need to use a different snippet of code for this? 

Link to comment
Just now, harry_ said:

Do I need to use a different snippet of code for this? 

You certainly do! What's your website URL?

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Here's the additional CSS you need:

// Site Title Font
.header-title-text a {
  font-family: 'ZonaProHairline';
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

excellent! thank you so much for your help so far! There are a few more things I would like your professional input on this website, would you mind if I contact you over upwork for this? 

 

Link to comment
10 minutes ago, harry_ said:

excellent! thank you so much for your help so far! There are a few more things I would like your professional input on this website, would you mind if I contact you over upwork for this? 

Of course!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.