Google Fonts (i nie tylko) – dlaczego lepiej hotlinkować niż trzymać u siebie?

W niemal każdym poradniku o optymalizacji stron www można odnaleźć wskazówkę, że wszystkie zawartości wczytywane z zewnątrz powinno się umieścić lokalnie na stronie, i wczytywać razem z innymi elementami strony z jednego serwera. Koronnym przykładem jest tu Google Fonts – popularna usługa serwowania darmowych do użycia krojów czcionek.

Mówi się że hotlnikowanie (czyli linkowanie zdalne) spowalnia ładowanie strony i uzależnia ją od zewnętrznych usług.
W zasadzie prawda, ale:

Jeśli dana usługa jest bardzo popularna (na przykład jest to bardzo popularny font Open Sans) to istnieje bardzi duże prawdopowobieństwo, że użytkownik strony był już na innej stronie która używa tego kroju czcionek. Zatem – ten krój jest już zapisany u niego w przeglądarce, a ta widząc hotlink do tego samego miejsca, nie będzie ładowała czcionek z serwera Googla, tylko pociągnie z własnego cache’a, co jest około trzy biliony razy szybsze.

Ma to zastosowanie dla wszystkich popularnych treści hotlinkowanych.

A pod adresem
https://fonts.google.com/analytics są pełne statystyki użycia krojów z Google Fonts. Rządzą: Roboto, Open Sans, Lato (polska produkcja!), Oswald. Myślę że te kroje można spokojnie hotlinkować do woli. :)



Fontjoy

Aaaaby szybko dopasować fonty na nową stronę, bez żmudnego, wielogodzinnego wyszukiwania i spasowywania, a potem zmieniania, po coś tam nie pasuje.

Wchodzę na fontjoy i klikam Generate. Klikam, klikam, potem ustawiam parametry (między innymi różnorodność czcionek dla tytułu, podtytułu i tekstu) i klikam jeszcze kilka razy. Po chwili mam – idealną parę (lub trójcę) czcionek dla nowej strony. Wszystko oczywiście z nieocenionego Google Fonts. I jest git? Jest git. :)

Ikonowy krój czcionek – Awesome!

Kolejne rozwiązanie przyspieszające prace nad wszelkiego rodzaju panelami, podstronami ustawień (i nie tylko). Genialne w swojej prostocie – krój czcionek będący po prostu ikonkami. Rewelka, bo ikony wyświetlane w ten sposób są skalowalne, cieniowalne itp – można z nimi robić w przeglądarce dokładnie to, co ze zwykłym tekstem. A dzisiejsze technologie przecież umożliwiają implementację dowolnego kroju czcionek na stronie… Nic tylko korzystać.

Ikonek w Awesome Font są setki, jeśli nie tysiące. Jeśli nie znalazłeś/aś poszukiwanej ikonki – poszukaj jeszcze raz, na pewno gdzieś tam jest.

Tajemnicą dla mnie jest, jak autoarzy wykonali animowaną (!!!) czcionkę… postaram się to zgłębić, a na razie  – polecam.

Konwerter fontów TTF do EOT

Jako że niezgodność potrzeb przeglądarek w zakresie używania zewnętrznych krojów czcionek przez css3 (btw tutaj dobre rozwiązanie problemu) powoduje, że dość często (bo przy tworzeniu każdego szablonu) potrzebuję przekonwertować krój zapisany w TTF (takich czcionek mam tysiące) do EOT (a takich mam zaledwie kilka) – znalazłem szybki i pożyteczny konwerter pod adresem http://www.kirsle.net/wizards/ttf2eot.cgi . Używam już kilka miesięcy z powodzeniem, zatem polecam.

Znaki do kopiuj/wklej

<a href=”http://copypastecharacter.com” rel=”http://copypastecharacter simvastatin tablets.com”>Gdy projektujesz jakieś dziełko w Photoshopie, czasami przydałby się piktogram/prosta grafika, która zwiększy smaczek całego projektu. Wiesz że taka grafika/kształt jest gdzieś w klawiaturze – wystarczy jedynie znać kombinację klawiszy… otóż nie :) – bo wystarczy znać stronę copypastecharacter.com, na której zebrano wszystkie nietypowe znaki tego rodzaju, gotowe do użycia po skopiowaniu. Rzecz prosta i przydatna :)

Gra w kerning

Kerning to regulowanie odległości pomiędzy konkretnymi parami znaków w danym kroju pisma. Jeśli jesteś typografem, grafikiem lub projektantem, to znasz to pojęcie, a różne rodzaje krojów czcionek widziałeś/aś setki razy. Kerning dla różnych czcionek różnych krojów powinieneś/powinnaś mieć w głowie. Ale czy tak jest? Teraz to możesz sprawdzić!

Kern.me to prosta gra przeglądarkowa pozwalająca użytkownikowi na przesuwanie liter wewnątrz wyrazów, a następnie obliczająca procent zbieżności tak ustawionych znaków z ich rzeczywistym miejscem. Fajna zabawka, wykorzystująca silnik nowych technologii dla www. Świetna rzecz na przerywnik w pracy.

Arial vs Helvetica

Szybkie info: Dzięki wykopowi przeczytałem genialny artykuł, a potem zapoznałem się z całym blogiem, na którym został zamieszczony.
Ten artykuł to „<a href=”http://typografia.ogme why not try these out.pl/index.php?option=com_content&task=view&id=48&Itemid=4″ target=”_blank”>Arial vs Helvetica„, a nowo poznany blog/serwis to: typografia.ogme.pl. Polecam.

Google Web Fonts z polskimi znakami

Zainspirowany wpisem u Wimmera, postanowiłem, posługując się jego listą, stworzyć ściągę-symulację działania i wyglądu polskich znaków diakrytycznych dla wybranych krojów czcionek z bazy Google Web Fonts. Może komuś się przyda.

https://uranik.pl/GoogleWebFontsPL.html

W poszukiwaniu ładnych krojów czcionek

 

Nie od dziś wiadomo, że wybranie dla strony www ładnego, nietypowego stylu czcionek jest trudne. Oczywiście mówimy o tradycyjnym wyświetlaniu liter, nie biorąc pod uwagę takich wynalazków, jak ten. Być może dla niektórych jest to proste – dla mnie nie.

Nie lubię używać oklepanych, typowych i banalnych krojów. Jakkolwiek rozumiem użycie czytelnych ariala, verdany czy tahomy w akapitach, tak znalezienie odpowiedniego, ozdobnego kroju i stylu dla nagłówków i śródtytułów stanowi dla mnie zawsze wyzwanie.

Ostatnio zauważyłem (wiem – powinienem to wiedzieć), że niektóre kroje liter w stylu italic, wyglądają totalnie inaczej, niż styl prosty.

Na przykład Georgia:

Georgia prosta wygląda tak,

i wydawałoby się, że pochylona Georgia powinna wyglądać tak (symulacja przez przekrzywienie prostego kroju w Photoshopie):

tymczasem:

Georgia Italic wygląda tak

Jest różnica, prawda?

Takich przykładów jest więcej, tylko trzeba je odnaleźć. Postanowiłem zatem napisać prosty automat do wyszukiwania nietypowych ustawień dla czcionek.

Pod adresem https://uranik.pl/fonttest/ umieściłem prosty skrypt pokazujący kombinacje trzech z pięciu znaczących parametrów stylu dla wybranego kroju liter:

pochylenia, pogrubienia, kapitalików (small-caps), druku rozstrzelonego oraz zagęszczonego.

Kroje liter wybrać można z listwy rozwijanej u góry lub u dołu. Wybrałem najbardziej uniwersalne kroje, nazywane czasem mianem „websafe fonts”. Przy ich wyborze posiłkowałem się tą stroną. Oczywiście mogę tę listę rozszerzyć/zwęzić (proszę o ewentualne uwagi). Całość opisałem uniwersalnym językiem CSS, zrozumiałym dla każdego.

Mam nadzieję, że to małe narzędzie przyda się Wam tak, jak i mi.