Jump to content

costumize fonts in navigation, forms and buttons using CSS

Recommended Posts

Site URL: https://www.kultursummit.at

Hi,

I want to change the fonts on the website https://www.kultursummit.at to locally hosted ones since google fonts are tricky with GDPR. I managed to do so for using this CSS code. But I don't know how I can do so for all the other elements, like Header navigation, forms, buttons and then for mobile as well. Can anybody help?

 

//Google Font einfügen
@font-face {
font-family: Playfair Display;
src: url(https://static1.squarespace.com/static/5d1b2aff5f0786000168c155/t/6304c9195e4c3939a1bc9985/1661258010565/PlayfairDisplay-VariableFont_wght.ttf);
}

//Google Font einfügen
@font-face {
font-family: Work Sans;
src: url(https://static1.squarespace.com/static/5d1b2aff5f0786000168c155/t/6304c9dddcd63a67b7973e6b/1661258206577/WorkSans-VariableFont_wght.ttf);
}

//Google Font für alle Textarten verwenden

h1, h2,  {
font-family: 'Playfair Display';
}

h3, h4, p {
font-family: 'Work Sans';
}

.sqsrte-large {
font-family: 'Work Sans';
}

.sqsrte-small {
font-family: 'Work Sans';
}

 

Thank you!!

Link to comment

Hello Andreas,
I have the same problem here in Germany.  I looking for a solution to get rid of the direct link to  Google which delivers them the IP adress.

I tried to upload the fonts for all other elements than H1, H2 or H3 as well. I think you need to change all fonts for buttons, footer content, navigation, quotes, etc. 

For example the CSS code for the quotes:

//*********************//
//Lokale Schrift fuer Zitate: Merriweather
.sqs-block-quote {font-family: merriweather;}

@font-face {
font-family: merriweather;
src: url(https://static1.squarespace.com/static/5c5d7e5e65a707f5b6284d75/t/62f63b42ac32fd191c02190d/1660304195042/Merriweather-Regular.woff2);
}

//*********************//
//Lokale Schrift fuer Zitat-Autor: Dosis
.sqs-block-quote .source {font-family: dosis;}

@font-face {
font-family: dosis;
src: url(https://static1.squarespace.com/static/5c5d7e5e65a707f5b6284d75/t/62ee955c69fb2875d741a180/1659802972925/dosis-regular-webfont.woff);
}

//Styling der Autorenangabe
.sqs-block-quote .source {
font-family: 'dosis';
font-weight: 700;
font-style: normal;
font-size: 12px;
letter-spacing: 0.4em;
line-height: 5.0em;
text-transform: uppercase;
}

//*********************//

It works, but the links to the Google fonts are still there. I am looking for a solution, to get rid of the links to Google Fonts. 

Does anybody have an idea how to solve this problem?

Regards, Angelika

Bildschirmfoto 2022-08-23 um 23.06.49.png

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.