WebFonter: Previzualizați fonturile FontShop pe orice site web - Ce funcționează acum

WebFonter a fost un instrument de browser pentru a testa fonturile FontShop direct pe un site web înainte de a cumpăra un font. Acesta le permitea designerilor să modifice titlurile și corpul textului în loc să judece un font dintr-un specimen static. Fluxul de lucru inițial este acum istoric: magazinul online FontShop s-a închis în 2023, iar fosta adresă WebFonter redirecționează către o pagină de informații FontShop în loc de un instrument de instalare. Încă puteți previzualiza fonturile prin MyFonts și experimenta cu tipografia site-ului dvs. în instrumentele de dezvoltare ale browserului.

Poți instala în continuare WebFonter?

Nu vă bazați pe vechile instrucțiuni de instalare WebFonter. Conform întrebărilor frecvente oficiale Monotype privind închiderea platformei , platforma comercială FontShop.com a fost retrasă pe 15 decembrie 2023. Adresa web WebFonter originală duce acum la pagina de informații FontShop, care îi îndrumă pe clienți către MyFonts. O extensie sau un bookmarklet WebFonter acceptat în prezent nu a putut fi verificat. Prin urmare, vechile instrucțiuni pentru extensia Chrome și bookmarklet ar trebui tratate ca o înregistrare a modului în care funcționa produsul, nu ca un ghid de instalare funcțional.

Ce a făcut inițial WebFonter

Principalul avantaj al instrumentului era vizualizarea unui font în context. În loc să deschidă un specimen separat de font, un designer putea vizualiza o pagină reală și să-i modifice tipografia, păstrând în același timp aspectul vizibil.

  1. Deschideți un site web. Instrumentul original a fost oferit ca extensie Chrome și ca bookmarklet pentru alte browsere. A fost descris ca fiind utilizabil pe site-uri live și găzduite local, cu condiția ca serviciul său de fonturi să fie accesibil.
  2. Alegeți o familie de fonturi. Controlul Schimbare familie a oferit răsfoire și căutare de fonturi în catalogul FontShop. Alegerea unei familii a actualizat previzualizarea paginii.
  3. Atribuiți și ajustați stiluri. Interfața originală începea cu titluri și text, putea adăuga și alte ținte și oferea un control Tweak pentru dimensiune, înălțimea rândurilor și spațiere.
Previzualizare site web de călătorii cu un selector de fonturi flotant care listează mai multe familii de fonturi
Un selector de fonturi la nivel de site web ilustrează tipul de comparație în context pentru care a fost conceput WebFonter.

Acestea sunt descrieri istorice ale funcțiilor, nu meniuri actuale confirmate. Unele recenzii vechi menționau și o comandă rapidă Ctrl+H pentru ascunderea controalelor WebFonter. Evitați să urmați acest sfat într-un browser modern: Ctrl+H deschide în mod normal istoricul de navigare dacă pagina sau instrumentul nu îl interceptează.

Cum să testezi fonturile FontShop pe un site web astăzi

Colecția FontFont de la FontShop este acum oferită prin intermediul paginii oficiale de informații FontShop și MyFonts . Următoarea abordare separă descoperirea fonturilor de testarea pe pagină; spre deosebire de vechiul WebFonter, nu este o previzualizare cu un singur clic a FontShop-ului către site-ul web.

1. Previzualizați fontul folosind propriile cuvinte

Găsiți o familie de fonturi candidată pe MyFonts. În previzualizarea familiei de fonturi sau a stilului individual, introduceți un titlu real, o etichetă de navigare sau un paragraf din proiectul dvs. Conform Întrebărilor Frecvente MyFonts , puteți ajusta dimensiunea și culorile previzualizării și puteți inspecta funcțiile OpenType acceptate. Funcția sa Albume ajută, de asemenea, la colectarea fonturilor pentru a fi luate în considerare alăturat. Verificați mai multe grosimi: o față de afișare atractivă poate să nu fie confortabilă pentru paragrafe lungi.

Previzualizare Font Marketplace care afișează text exemplu în stilurile italic și aldin obișnuite
Comparați un font candidat în diferite stiluri și dimensiuni înainte de a-l integra într-un layout de pagină.

2. Inspectați textul pe care doriți să îl modificați

Deschideți site-ul web în Chrome, faceți clic dreapta pe un titlu sau un paragraf și alegeți Inspectare . Panoul Elemente identifică nodul HTML selectat; panoul Stiluri listează CSS-ul care îl afectează. De asemenea, puteți utiliza selectorul de elemente pentru a selecta text pe pagină. Consultați ghidul Google privind modul Inspectare pentru controalele documentate.

Browserul Chrome afișează un titlu de articol selectat lângă setările DevTools Elements și CSS pentru familia de fonturi
Inspectați un titlu și localizați declarațiile privind familia de fonturi, dimensiunea fontului și înălțimea liniei în panoul Stiluri.

3. Experimentați temporar cu tipografia

În Elemente → Stiluri , editați o declarație existentă de familie de fonturi sau adăugați una la elementul selectat. De exemplu, testați Georgia, serif ca înlocuitor disponibil local pentru o direcție serif, apoi experimentați cu font-size , line-height sau letter-spacing . Modificările sunt de obicei vizibile imediat, dar nu reprezintă o editare permanentă a site-ului publicat. Google explică aceste controale în referința sa DevTools CSS .

Important: Tastarea numelui unui font comercial în CSS nu descarcă sau încarcă automat fontul respectiv. Pentru a vedea fața comercială reală pe pagina dvs., aceasta trebuie să fie deja disponibilă printr-o resursă de fonturi licențiată și încărcată corespunzător sau printr-o instalare locală permisă. În caz contrar, browserul afișează o versiune de rezervă. Nu confundați o previzualizare de rezervă cu fontul pe care intenționați să îl cumpărați.

Două versiuni ale aceleiași pagini de articol care prezintă tipografie sans-serif și serif contrastante
Comparați același titlu și paragraf în două tratamente tipografice, verificând încadrarea textului și ierarhia.

4. Verificați licența înainte de implementare

O previzualizare gratuită în magazinul online nu este o licență pentru a găzdui fișierele de fonturi pe un site web public. MyFonts explică faptul că fonturile web sunt încorporate prin @font-face și necesită o licență webfont corespunzătoare; domeniile permise și termenii de vizualizare a paginii depind de licența oferită pentru produsul respectiv. Consultați informațiile de licențiere ale familiei și termenii de achiziție înainte de a adăuga fișiere în producție. Nu trebuie presupus că o licență desktop singură acoperă încorporarea web.

Ce trebuie să verificați înainte de a alege un font final

  • Potrivirea titlului: Titlul se încadrează natural pe lățimea desktopului și a dispozitivelor mobile?
  • Lizibilitatea textului: Dimensiunile mici, înălțimea rândurilor și densitatea paragrafelor sunt confortabile?
  • Ponderi și caractere: Sunt disponibile caracterele aldine, italice, semnele de punctuație și glifele lingvistice de care aveți nevoie?
  • Încărcare reală: Este afișată fața reală sau este doar o soluție de rezervă a browserului?
  • Licențiere: Planul achiziționat acoperă utilizarea site-ului dvs. web?

Dacă o modificare pare să nu aibă efect, verificați dacă o regulă CSS mai specifică are prioritate asupra editării, dacă fontul este încărcat efectiv și dacă ați selectat elementul corect al paginii. Testați mai mult de o lățime a ferestrei de vizualizare. Atractivitatea inițială a WebFonter era contextul imediat; astăzi, combinarea unui specimen MyFonts cu editări temporare DevTools oferă o modalitate practică de a face o alegere tipografică informată fără a pretinde că instrumentul scos din producție este încă disponibil.

Lasă un comentariu

Top 10 browsere proxy pentru o navigare mai sigură și mai privată

Top 10 browsere proxy pentru o navigare mai sigură și mai privată

Compară 10 browsere proxy și instrumente de browser, de la Tor și Opera la Firefox și CroxyProxy, cu limite practice de confidențialitate și sfaturi de configurare.

Cum să ștergi în masă postările de pe Facebook folosind Jurnalul de activitate

Cum să ștergi în masă postările de pe Facebook folosind Jurnalul de activitate

Află cum să ștergi în bloc postările de pe Facebook de pe telefon, să filtrezi actualizările vechi, să folosești Coșul de gunoi sau Arhiva și să restaurezi postările în termen de 30 de zile.

Cum să remediați eroarea ERR_TUNNEL_CONNECTION_FAILED în Chrome: 8 pași

Cum să remediați eroarea ERR_TUNNEL_CONNECTION_FAILED în Chrome: 8 pași

Remediați eroarea ERR_TUNNEL_CONNECTION_FAILED din Chrome verificând mai întâi setările proxy și VPN, apoi depanând extensiile, DNS-ul și software-ul de securitate.

Inbox integrat pentru Firefox: Accesați aplicațiile Google din Gmail

Inbox integrat pentru Firefox: Accesați aplicațiile Google din Gmail

Vedeți cum a integrat Inbox-ul introdus aplicațiile Google în Gmail în Firefox, ce funcționează încă pe hârtie și cum se compară panoul lateral încorporat al Gmail.

WebFonter: Previzualizați fonturile FontShop pe orice site web - Ce funcționează acum

WebFonter: Previzualizați fonturile FontShop pe orice site web - Ce funcționează acum

Află cum WebFonter ți-a permis odată să încerci fonturile FontShop pe site-uri web live, de ce instrumentul original este învechit și cum să previzualizezi fonturile astăzi.

Cum să anulezi o postare jenantă pe Facebook: Trucul celor cinci secunde și ce funcționează acum

Cum să anulezi o postare jenantă pe Facebook: Trucul celor cinci secunde și ce funcționează acum

Vechea extensie Facebook Undo oferea o întârziere de cinci secunde. Află ce funcționează în continuare pentru a edita, elimina, arhiva sau restaura o postare jenantă de pe Facebook.

Comutare setări de confidențialitate Firefox din bara de instrumente fără About:Config

Comutare setări de confidențialitate Firefox din bara de instrumente fără About:Config

Folosește extensia Setări de confidențialitate pentru Firefox pentru a modifica preferințele de confidențialitate acceptate dintr-o fereastră pop-up din bara de instrumente și pentru a afla când funcționează mai bine controalele încorporate.

Cum să combini mai multe linkuri într-unul scurt cu Shrink2One

Cum să combini mai multe linkuri într-unul scurt cu Shrink2One

Vedeți cum a grupat inițial Shrink2One mai multe adrese URL într-un singur link scurt, funcția opțională de parolă și ce trebuie să faceți dacă serviciul nu este disponibil.

Cum să verifici dacă altcineva îți accesează contul Gmail

Cum să verifici dacă altcineva îți accesează contul Gmail

Suspectați acces neautorizat la Gmail? Verificați activitatea recentă a contului, adresele IP, dispozitivele conectate și evenimentele de securitate și aflați cum să vă securizați contul.

Cum să creezi și să partajezi colecții pe Facebook

Cum să creezi și să partajezi colecții pe Facebook

Învață să organizezi postările salvate pe Facebook în colecții, să adaugi elemente pe desktop sau mobil, să inviți colaboratori și să verifici confidențialitatea partajării.