Jump to content

Change the font for links with CSS

Go to solution Solved by Ziggy,

Recommended Posts

I have uploaded two custom fonts. The first (Brandon Grotesque) font I have assigned to the entire website, the second (Didot) is to be used for H1, and H2.

Now I have a text block in H2 on my homepage that I would like to link to my contact page, but as soon as I put a link on the text, the text block changes to the Brandon Grotesque font, although the editor still tells me that I am writing in H2. Does anyone know the solution to this problem?

 

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Can you share how you applied the custom fonts and 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

Yeah sure!

 

Quote

/* Eigene Schrift */

@font-face {

font-family: Brandon Grotesque Light;

src: url(https://static1.squarespace.com/static/64c3bb611eee5633855bcae7/t/64df2b36d5cb3d7012ed4596/1692347190859/Brandon+Grotesque+Light.otf);

}
/* ALLE Texte überall */

html * {font-family: 'Brandon Grotesque Light'}

/* Eigene Schrift */

@font-face {

font-family: Didot Bold;

src: url(https://static1.squarespace.com/static/64c3bb611eee5633855bcae7/t/64df2b302db1e37ccef65a7f/1692347184544/Didot+Bold.otf);

}
/* Überschrift 1 */

h1 {font-family: 'Didot Bold';}

/* Überschrift 2 */

h2 {font-family: 'Didot Bold';}

// ersetzen der Unterstreichung des Links
 a {
  text-decoration:none!important;
}

 

Link to comment
  • Solution

This is a very broad way of applying the font:

html * {font-family: 'Brandon Grotesque Light'}

Try this instead:

// Eigene Schrift

@font-face {
  font-family: 'Brandon Grotesque Light';
  src: url('https://static1.squarespace.com/static/64c3bb611eee5633855bcae7/t/64df2b36d5cb3d7012ed4596/1692347190859/Brandon+Grotesque+Light.otf');
}
// ALLE Texte überall

p, .sqsrte-large, .sqsrte-small, h3, h4, p a, .sqsrte-large a, .sqsrte-small a, h3 a, h4 a {
  font-family: 'Brandon Grotesque Light';
}

// Eigene Schrift 

@font-face {
  font-family: 'Didot Bold';
  src: url('https://static1.squarespace.com/static/64c3bb611eee5633855bcae7/t/64df2b302db1e37ccef65a7f/1692347184544/Didot+Bold.otf');
}

// Überschrift 1

h1, h1 a {
  font-family: 'Didot Bold';
}

// Überschrift 2

h2, h2 a {
  font-family: 'Didot Bold';
}

// ersetzen der Unterstreichung des Links

 a {
  text-decoration:none !important;
}

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
12 hours ago, Mowgli said:

Thanks a lot! That finally worked! ❤️

Excellent!

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.