Cum să adăugați fonturi personalizate la Squarespace ca un profesionist

Doriți să adăugați fonturi personalizate în Squarespace?

Dacă sunteți utilizator Squarespace, știți deja că platforma vine cu câteva opțiuni solide de font. Dar există o mulțime de motive pentru a adăuga fonturi pe site-urile Squarespace!

De obicei, este un font de marcă sau chiar unul la comandă pe care l-ați făcut.

Poate că este mai mult despre un anumit aspect pe care doriți să îl creați pentru elementele din site-ul dvs.

Indiferent de motiv, este ușor să adăugați fonturi personalizate în Squarespace – trebuie doar să urmați acest proces!

Cum să adăugați un font personalizat pe site-ul dvs. Squarespace

Adăugarea unui font pe care îl alegeți pe site-ul dvs. Squarespace este destul de simplă, dar există puțin CSS de adăugat.

Asigură-te că ești de acord cu asta înainte de a începe sau ia pe cineva care este.

Pasul 1. Alegeți fontul

Dacă ați ales deja fontul pe care doriți să îl utilizați, treceți la pasul următor. În caz contrar, asigură-te că ai ales un font pe care îl poți folosi legal pe blogul tău.

Există o mulțime de locuri pentru a găsi fonturi gratuite și plătite, cum ar fi Creative Market. Dar verificați licențele înainte de a adăuga una pe site.

Pasul 2. Pregătiți fișierele cu fonturi web

Pentru a adăuga un font pe site, veți avea nevoie de trei formate de fișier de font:

1. .ttf sau .otf
2. .woff
3. .woff2

Uneori este posibil să aveți un tip de fișier de font web și, dacă o aveți, săriți peste acest pas. Puteți folosi doar asta.

În caz contrar, aveți cele trei tipuri de fișiere gata de adăugat.

Pasul 3. Încărcați fișierele cu fonturi în Squarespace

Accesați Design > CSS personalizat > Gestionați fișiere personalizate

Aici veți adăuga fonturi prin butonul de încărcare.

Repetați acest lucru pentru toate cele trei fișiere sau pentru fișierul fontului web, dacă acesta este ceea ce aveți.

Pasul 4. Denumiți fontul personalizat în Squarespace

Odată ce fontul este încărcat, trebuie să spuneți lui Squarespace unde și ce este cu Editorul CSS.

Utilizați următorul cod:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Luați asta și adăugați informațiile relevante pentru fontul dvs.:

• Nume font: înlocuiți-l cu numele fontului dvs. bazat pe numele fișierului sau ceva de care vă veți aminti.
• Adresele URL ale fonturilor: înlocuiți-le cu adresele URL ale fonturilor pe care tocmai le-ați încărcat. Luați adresa URL din zona dvs. de încărcare (în același mod în care ați face-o pentru o adresă URL a imaginii) și adăugați-o la loc.

Pasul 5. Definiți unde și cum trebuie utilizat fontul personalizat

În cele din urmă, trebuie doar să spuneți lui Squarespace unde să utilizați diferitele fonturi de pe site-ul dvs. web.

Acest lucru poate fi în locuri precum anteturile dvs. sau antetul site-ului, butoanele sau chiar ceva de genul blocului de buletine informative.

Cum să-ți folosești fontul în locuri comune

Odată ce ați încărcat fontul, puteți începe să oferiți Squarespace informații specifice despre unde să îl utilizați.

Iată câteva exemple populare și cum să o faci.

Cum se schimbă fonturile pentru antetul site-ului

Antetul site-ului este zona din partea de sus a barei de navigare.

S-ar putea să aveți o mulțime de link-uri aici, un logo text și poate un anunț.

Fontul tuturor acestora poate fi schimbat folosind următorul fragment CSS:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Nu uitați să înlocuiți NUMELE DVS. cu numele fontului dvs.

Cum se schimbă fonturile butoanelor

Un alt loc popular pentru a utiliza fonturi personalizate este pe butoanele site-ului dvs.

Există trei blocuri de butoane: Mic, Mediu și Mare. Puteți schimba unul sau toate dintre ele cu următorul cod:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Nu uitați să înlocuiți NUMELE DVS. cu numele fontului dvs.

Fixați-l pe Pinterest pentru a putea reveni mai târziu!

(Mai multe sfaturi pentru font personalizate și depanare după grafic).

Cum să schimbați fonturile pentru blocurile buletinului informativ

Blocul Newsletter permite oamenilor să se înscrie pentru lista dvs. de e-mail. Mulți oameni folosesc pluginuri diferite pentru aceasta.

Dar dacă utilizați blocul în Squarespace, următorul cod vă va permite să adăugați un font personalizat.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Nu uitați să înlocuiți NUMELE DVS. cu numele fontului dvs.

Cum să schimbați fonturile postărilor de blog

Unul dintre cele mai populare lucruri de făcut cu un font este să-l folosești pentru postările pe blog.

Atunci când faceți acest lucru, trebuie să luați în considerare titlul paginii, descrierile și titlurile postărilor pe paginile articolului.

Probabil vei dori ca toate să fie la fel.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Nu uitați să înlocuiți NUMELE DVS. cu numele fontului dvs.

Cum să schimbați fonturile pentru blocurile de citate

Ultimul exemplu este schimbarea blocului de citate cu un font diferit.

Acesta este folosit pentru citatele din postări, dar și pentru lucruri precum mărturiile clienților sau recenziile.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Nu uitați să înlocuiți NUMELE DVS. cu numele fontului dvs.

S-ar putea să vă placă și ghidul meu de dimensiune a imaginii Squarespace.

Probleme cu fontul personalizat

Adăugarea de fonturi este o treabă ușoară odată ce vă pricepeți la un mic CSS. Dar există câteva erori comune care sunt raportate.

Mesajul „Fonturi neacceptate” în stilurile site-ului

Ocazional, este posibil să vedeți un mesaj „font neacceptat” pe site-ul dvs. Acest lucru se întâmplă atunci când este utilizat un font Adobe și apoi Adobe îl retrage.

De cele mai multe ori, Squarespace îl va înlocui cu cea mai apropiată alternativă. Dar dacă nu, ar putea fi necesar să încărcați un alt font pentru a-l înlocui.

Fontul meu arată diferit când sunt autentificat

Uneori, oamenii observă că fonturile lor arată diferit atunci când sunt autentificați și când vizualizează site-ul live. De obicei, acest lucru se datorează cititorilor de fonturi și modului în care aceștia văd site-ul.

Dacă observați acest lucru, contactați asistența Squarespace și se pot uita la setări pentru a vedea ce trebuie ajustat.

Nu îmi pot seta fontul la o anumită dimensiune

Problemele legate de setarea unei dimensiuni specifice pentru un font sunt de obicei legate de backend-ul site-ului dvs. web. Poate fi din cauza versiunii Squarespace pe care o utilizați.

Așadar, apelați la asistență pentru a obține asistență cu ceea ce ar putea fi în neregulă.

Adăugați fonturile personalizate în Squarespace

Cu o atingere de CSS, puteți adăuga rapid fișiere de font personalizate în Squarespace.

Le puteți folosi în diferite locuri cu un pic de cod și puteți ajusta totul, de la dimensiune la spațierea dintre litere.

Editorul de stil a facilitat personalizarea site-ului web dincolo de opțiunile de fonturi încorporate.

Deci, cum ați putea folosi fonturi personalizate pentru a face site-ul dvs. să arate și mai inteligent?