Kuinka laitetaan kaksi eri fonttia otsikoihin Squarespace 7.1-järjestelmässä?
Tässä blogipostauksessa pieni Squarespace 7.1-järjestelmän vinkki, näitä tulee jatkossa lisää!
Haluatko kahta tai useampaa eri fonttia otsikkokenttiin? Tässä pieni step-by-step ohje!
Squarespace 7.1-järjestelmässä on neljä eri otsikkotasoa, h1, h2, h3 ja h4 sekä kolme leipäteksti-tasoa.
Erittäin suuri otsikko, pääotsikko = Otsikko 1 = Heading 1 = h1
Suuri otsikko = Otsikko 2 = Heading 2 = h3
Keskikokoinen otsikko = Otsikko 3 = Heading 3 = h3
Pieni otsikko = Otsikko 4 = Heading 4 = h4
Suuri leipäteksti = Paragraph 1 = p1
Keskikokoinen leipäteksti = Paragraph 2 = p2
Pieni leipäteksti = Paragraph 3 = p3
Kun luot uutta sivua ja työskentelet fonttien kanssa, se saattaa näyttää suurinpiirtein tältä:
Kaikki yllä olevat fontit on acumin-fonttiperhettä, mutta mitäpä jos haluaisit asettaa vaikka otsikko 2 toisenlaiseksi fontiksi? Käytetään tässä esimerkissä fonttia Pacifico. Tämä onnistuu pienellä copy-paste CSS-keinolla!
Tässä ohje siihen!
Kirjaudu omilla Squarespace-tunnuksillasi sivuillesi ja valitse Design -> Custom CSS.
Kopioi sinne:
h2 {
font-family: pacifico;
}
Nyt sivustosi kaikki h2-otsikot ovat muuttuneet Pasifico-fontillisiksi.
Mikäli haluaisit tehdä enemmän muutoksia tuohon fonttiin, kuten vaikka vaihtaa sen paksuutta, ilmavuutta sen ympärillä, tai vinottaa sen italic-muotoon, niin se onnistuu esimerkiksi näin:
h2 {
font-family: pacifico;
font-weight: 700;
line-height: 1.1em;
font-style: italic;
letter-spacing: .2em;
}
Tämä sama on sovellettavissa kaikkiin otsikkotasoihin, vaihda vain tuo h2 toisella otsikkoelementillä (h1,h2,h3,h4) tai vaikka leipätekstillä (p1,p2,p3).
Huom! Vain yksi määritelmä kerrallaan kannattaa syöttää tuonne - eli älä laita kahta eri määritelmää samalle otsikko-/leipätekstikoolle.
Toivottavasti tämä auttaa! 💜
Vielä yksi juttu!
Squarespacessa on myös paljon fonttivaihtoehtoja ja muokkausmahdollisuuksia ilman CSS:n lisäystä, ne ovat kuitenkin hieman piilossa. Mikäli et ole näitä vielä tutkinut niin pääset katsomaan näitä menemällä seuraavaa reittiä:
Admin paneeli -> Design -> Fonts -> klikkaa ⚙️-ikonia valitsemassasi fonttipaketissa ja sitten -> Advanced
