Od czasu kłopotów spowodowanych użyciem Cufon odważyłem się odejść od korzystania z zewnętrznych zasobów czcionek, ale ostatnio szukałem alternatywnych metod ładowania czcionek, aby sprawdzić, czy jest lepszy sposób; lepsze metody pojawiają się niespodziewanie.

Istnieje wiele nowych metod i wydaje się, że istnieje wiele odmian każdej metody; Czy powinienem używać Typekit ? lub Google WebFonts (z js lub css)? czy powinienem nadal używać czcionek ładowanych lokalnie (np. metoda generowana przez fontsquirrel.com)?

Poniżej wymienię metody, które wydają się najlepiej odbierane, wraz z kilkoma testami, ale czy naprawdę warto przejść na czcionkę internetową? Wygląda na to, że przenosi większe obciążenie zasobów (żądania http) i ma mniej typów formatów plików (mniej kompatybilności) itp. Ale wygląda na to, że pliki są ładowane asynchronicznie i wydajnie w większości przypadków.

1. Czy to tylko kwestia sytuacji i potrzeby? Jeśli tak, to jakie?
2. Czy istnieją drastyczne różnice między tymi metodami?
3. Czy jest lepsza metoda, której nie wymieniłem?
4. Jakie są zalety / wady wydajności? Popatrz? zależności? kompatybilności?

Naprawdę szukam tutaj najlepszych praktyk, wydajność jest ważna, ale tak samo jak skalowalność i łatwość użytkowania. Nie wspominając o wyglądzie i odczuciu.

Google CSS

• używa tylko zewnętrznego arkusza stylów
• używa tylko najmniejszego zgodnego typu pliku
• może użyć @importlub <link>lub pobrać zawartość styleshee ( @font-face) i umieścić ją bezpośrednio w swoim własnym arkuszu stylów.

Wyniki testu

  78ms load of html
  36ms load of css

Metoda Google JS

• używa webfont.jsdo ładowania stylów
• używa tylko najmniejszego zgodnego typu pliku
• dołącza :rootelement z klasą
• dodaje skrypt do głowy.

Wyniki testu

    171ms load of html
    176ms load of js
    32ms load of css

Metoda Typekit

• dołącza :rootelement z klasą.
• Można użyć *.jsfragmentu lub zewnętrznie załadowany plik *.jsplik
• używa data:font/opentypezamiast pliku czcionki.
• dodaje skrypt do głowy
• dodaje osadzony css do głowy

• dodaje zewnętrzny arkusz stylów do nagłówka

  możesz łatwo dodawać / usuwać / dostosowywać czcionki i selektory docelowe z typekit.com

Wyniki testu

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

… I metoda wiewiórki czcionek

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… Lub z danymi: metoda czcionki…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Najpierw wyjaśnię coś o ofercie Google. W rzeczywistości załaduje najmniejszy format, jaki obsługuje Twoja przeglądarka. WOFF oferuje małe rozmiary plików, a Twoja przeglądarka je obsługuje, więc to ta, którą widzisz. WOFF jest również dość szeroko obsługiwany. Jednak na przykład w Operze prawdopodobnie otrzymasz wersję TrueType czcionki.

Uważam, że logika rozmiaru pliku jest również powodem, dla którego Font Squirrel wypróbowuje je w tej kolejności. Ale to głównie spekulacje z mojej strony.

Jeśli pracujesz w środowisku, w którym liczy się każde żądanie i każdy bajt, będziesz musiał przeprowadzić pewne profilowanie, aby dowiedzieć się, które z nich działa najlepiej w Twoim przypadku użycia. Czy ludzie będą przeglądać tylko jedną stronę i nigdy więcej jej nie odwiedzą? Jeśli tak, reguły buforowania nie mają tak dużego znaczenia. Jeśli przeglądają lub wracają, Google może mieć lepsze reguły buforowania niż Twój serwer. Czy opóźnienie jest większym problemem, czy też przepustowością? Jeśli opóźnienie, staraj się o mniej żądań, więc hostuj je lokalnie i łącz pliki tak często, jak to możliwe. Jeśli przepustowość, wybierz dowolną opcję, która kończy się na najmniejszym kodzie i najmniejszym formacie czcionki.

Teraz przejdźmy do rozważań dotyczących CSS vs JS. Spójrzmy na następujący fragment kodu HTML:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

W wielu przypadkach script1, style1i style2byłoby blokowanie. Oznacza to, że przeglądarka nie może kontynuować wyświetlania dokumentu, dopóki ten zasób nie zostanie załadowany (chociaż nowoczesne przeglądarki trochę to oszukują). Co może być naprawdę dobre, szczególnie w przypadku arkuszy stylów. Zapobiega flashowaniu niestylizowanych treści, a także zapobiega gigantycznym przesunięciom, które wystąpiłyby podczas stosowania stylów (a zmiana treści jest naprawdę denerwująca dla użytkownika).

Z drugiej strony script2nie będzie blokował. Można go załadować później, a przeglądarka może przejść do analizowania i wyświetlania pozostałej części dokumentu. Więc to też może być korzystne.

Mówiąc konkretnie o czcionkach (a dokładniej ofercie Google), prawdopodobnie trzymałbym się metody CSS (podoba mi się, @importponieważ stylizuje się z arkuszem stylów, ale to może być tylko ja). Plik JS załadowany przez skrypt ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) jest większy niż @font-facedeklaracja i po prostu wygląda na dużo więcej pracy. I nie uważam, że ładowanie samej czcionki (WOFF lub TTF) blokuje, więc nie powinno to zbytnio opóźniać. Osobiście nie jestem wielkim fanem CDN, ale faktem jest, że są NAPRAWDĘ szybkie. Serwery Google pokonają większość wspólnych planów hostingowych gwałtownie, a ponieważ ich czcionki są tak popularne, ludzie mogą nawet mieć je już w pamięci podręcznej.

I to wszystko, co mam.

Nie mam doświadczenia z Typekitem, więc pominąłem to w moich teoretykach. Jeśli są jakieś nieścisłości, nie licząc uogólnień między przeglądarkami dla samej argumentacji, zwróć na nie uwagę.

Myślę, że w swoim pytaniu bardzo dobrze zająłeś się czasem ładowania. Z mojej perspektywy jest kilka źródeł, które należy dodać do listy, oraz kilka innych kwestii, które należy przeanalizować, aby uzyskać pełny obraz opcji.

Inne renomowane źródła czcionek

cloud.typography

http://www.typography.com/cloud/

Z tego, co wiem, czcionki są osadzone jako dane w pliku CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Oto moje specyfikacje:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Oto ich bardzo ogólny opis ich rozmieszczenia .

Fonts.com

Nie korzystałem z tej usługi, ale jest to bardzo uznany dostawca czcionek, a informacje, które umieścili na swojej stronie, są imponujące. Nie mam specyfikacji ich dokładnych metod, ale wiem, że mają:

• Niektóre z najbardziej znanych dostępnych czcionek na świecie
• Naprawdę duża biblioteka czcionek (ponad 20 000)
• Pobieranie czcionek na komputery stacjonarne do tworzenia makiet
• Niestandardowe narzędzie do testowania czcionek internetowych w przeglądarce
• Precyzyjne kontrolki i podzbiór typografii
• Opcje samodzielnego hostingu

FontSpring

Powiązany z FontSquirrel. Czcionki można kupić tutaj za stałą cenę. Dostarczane są pliki czcionek wraz z towarzyszącym CSS, które można wdrożyć na własnym serwerze, podobnie jak FontSquirrel.

Rozszerzone specyfikacje

Jeśli chodzi o ogólne wady i zalety każdej usługi czcionek, oto kilka porównań:

Rozmiar biblioteki czcionek

• Fonts.com : ponad 20 000
• FontSpring : 1000+
• FontSquirrel : 300+
• Google : 600+
• Typekit : 900+
• Typography.com (cloud.typography.com): prawdopodobnie 300+ (35 rodzin)

cennik

• Fonts.com : 20 USD miesięcznie za 500 000 odsłon
• FontSpring : zależy od czcionki (jednorazowy zakup czcionek)
• FontSquirrel : bezpłatny
• Google : bezpłatnie
• Typekit : 4 USD miesięcznie za 500 000 odsłon
• Typography.com : 12,50 USD miesięcznie za 1 000 000 wyświetleń strony

Jakość czcionki

Jakość czcionek internetowych może się znacznie różnić. Może to obejmować takie rzeczy, jak same kształty liter, odstępy lub rozmiar zestawu znaków. Wszystko to decyduje o ogólnym wrażeniu jakości, jakie da czcionka. Chociaż darmowe opcje mają kilka dobrych opcji, mają również czcionki, które nie są tak wysokiej jakości, więc powinieneś uważnie wybierać z tych źródeł.

• Fonts.com : Wysoki
• FontSpring : mieszane z wysokim
• FontSquirrel : mieszany
• Google : mieszane
• Typekit : wysoki
• Typography.com : Bardzo wysoko (daję to oznaczenie „bardzo wysokie”, ponieważ Fonts.com, FontSpring i Typekit obsługują odlewnie wielu typów, gdzie są to tylko czcionki z odlewni H&FJ, która należy do najlepszych na świecie)

Jakość czcionki II: Typografia

Istnieje wiele udoskonaleń w typografii dla komputerów stacjonarnych, które były naprawdę trudne do uzyskania w czcionkach internetowych. Niektóre z tych usług oferują sposoby ich dostarczania.

• Fonts.com : kerning, odstępy między literami, ligatury, znaki alternatywne, ułamki itp.
• FontSpring : brak
• FontSquirrel : brak
• Google : brak
• Typekit : brak
• Typography.com : kapitaliki, ligatury, alternatywne znaki, alternatywne style liczb, ułamki itp.

Wsparcie przeglądarki

Sprowadza się to głównie do formatów czcionek obsługiwanych przez każdą usługę. Najważniejsze z nich to:

• EOT: dla przeglądarki Internet Explorer (IE 4+)
• TrueType i OpenType: tradycyjne formaty (Safari 3.1+, FF 3.5+, Opera 10+)
• WOFF: Nowy standard czcionek internetowych (FF 3.6+, Chrome 5+)
• SVG: IOS <4.2

Więcej informacji na temat reguły @ Font-Face i przydatnych sztuczek dotyczących czcionek internetowych

Wszystkie te usługi obsługują główne formaty czcionek. W przypadku czcionek hostowanych na własnym serwerze, o ile używasz właściwej składni, powinieneś być objęty. Oto aktualizacja z 2011 roku kuloodpornej składni z FontSpring :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Wydajność I: Pobieranie

O ile rozumiem, użycie powyższej składni pozwala przeglądarkom na pobranie określonego formatu, który dla nich działa, więc nie ma zmarnowanych pobrań formatów czcionek, które nie działają.

Płatne usługi, takie jak Fonts.com, Typekit lub Typography.com, używają metod do wykrywania prawidłowego formatu, a następnie dostarczają odpowiedni format czcionki, często jako dane base64 w pliku CSS.

Z tego, co widzę, różnice w metodach, które wymieniłeś powyżej, są dość nieistotne dla użytkowników szybkiego internetu (wydaje się, że różnica wynosi <200 ms), ale warto je rozważyć w przypadku urządzeń w wolniejszych sieciach, szczególnie w przypadku odsłon stron niebuforowanych.

Wydajność II: Podzbiór

Jeśli wiesz, że będą tylko określone znaki, których chcesz użyć, możesz zbudować czcionkę z podzbioru znaków, a tym samym zmniejszyć rozmiar pobieranego pliku.

• Fonts.com : Bardzo szczegółowa kontrola
• FontSpring : można ponownie skompilować jako podzbiór za pomocą generatora czcionek internetowych FontSquirrel
• FontSquirrel : Można ponownie skompilować jako podzbiór za pomocą generatora czcionek internetowych
• Google : bardzo szczegółowa kontrola
• Typekit : ograniczone opcje „wszystkich znaków” lub „domyślnych”
• Typography.com : Bardzo szczegółowa kontrola

Performance III: Dostawa

• Fonts.com : Globalny CDN lub Twój własny serwer
• FontSpring : Oparty na Twoim serwerze
• FontSquirrel : Oparty na Twoim serwerze
• Google : globalny super-CDN
• Typekit : Global CDN
• Typography.com : Globalny CDN (125 000 serwerów)

Wsparcie językowe

• Fonts.com : 40 języków, w tym azjatyckie i bliskowschodnie
• FontSpring : Western, w zależności od czcionki
• FontSquirrel : Western, w zależności od czcionki
• Google : zachodnia, w zależności od czcionki
• Typekit : zachodni, w zależności od czcionki
• Typography.com : zachodnia, w zależności od czcionki

Testowanie i wdrażanie

• Fonts.com : Bardzo łatwe, z rozbudowanymi i konfigurowalnymi narzędziami
• FontSpring : Technical (zrób to sam)
• FontSquirrel : Technical (zrób to sam)
• Google : łatwe
• Typekit : łatwe
• Typography.com : Łatwe testowanie, trochę bardziej wymagające zmiany po wdrożeniu

Cóż, jak chcesz

... szukając tutaj najlepszych praktyk, ważna jest wydajność, ale tak samo jak skalowalność i łatwość użycia. Nie wspominając o wyglądzie i odczuciu.

odpowiedź brzmi (jak zawsze w projektowaniu stron internetowych): To zależy!

Jedno jest pewne, że nie polecałbym korzystania z podejścia JS (pokazanego w drugim przykładzie).

Osobiście nie lubię tworzyć rzeczy prezentacyjnych i stylów CSS w zależności od Javascript, mimo że zdecydowana większość użytkowników ma go włączoną. Chodzi o to, aby nie mieszać.

I jak widać na podanym przykładzie, istnieje pewien rodzaj FOUC (flas of unstyled content), ponieważ strona jest już renderowana przez przeglądarkę, zanim czcionka jest dostępna. Jak tylko to się stanie, strona jest przerysowywana. Im większa witryna, tym większy wpływ (wydajności)!

Dlatego nigdy nie użyłbym żadnego rozwiązania JS do osadzania czcionek.

Przyjrzyjmy się teraz czystym metodom CSS.
Od dłuższego czasu trwa dyskusja o „kontra @import”. Osobiście wolę unikać używania @import i zawsze używać <link>tylko. Ale jest to głównie kwestia osobistych preferencji. Jedyną rzeczą, której nigdy nie powinieneś robić, jest mieszanie ich obu!

Lokalna a CDN
Podejmując decyzję, czy udostępnić pliki czcionek lokalnie, czy użyć CDN, to zależy to głównie od liczby różnych czcionek i odpowiednich czcionek, które chcesz osadzić.

Dlaczego jest to ważne lub odgrywa jakąś rolę?
Z punktu widzenia wydajności, zalecałbym włączenie czcionki zakodowanej w Base64 do (jednego) arkusza stylów. Ale tylko format .woff, ponieważ jest używany przez prawie wszystkie współczesne przeglądarki, czyli przez większość odwiedzających. Wszyscy inni użytkownicy żyją z dodatkową prośbą.

Jednak ze względu na "narzut" spowodowany kodowaniem Base64 i rozmiarem pliku czcionki (nawet w formacie .woff), ta technika powinna być używana tylko wtedy, gdy masz nie więcej niż 3 lub 4 różne czcionki. I zawsze upewnij się, że twój serwer dostarcza pliki (CSS) spakowane gzipem.

Dużą zaletą takiego rozwiązania jest to, że nie masz dodatkowego żądania dotyczącego pliku czcionki. A po pierwszym załadowaniu strony (bez względu na to, która strona Twojej witryny) plik CSS jest buforowany. Jest to również zaletą, jeśli używasz pamięci podręcznej aplikacji HTML5 (co z pewnością zrobisz).

Oprócz tego, że autor nie powinien używać więcej niż 3 lub 4 różnych czcionek na swojej stronie, przyjrzyjmy się metodzie korzystania z CDN Google.

Przede wszystkim pamiętaj, że możesz (i zawsze powinieneś) dołączyć wszystkie pożądane czcionki do jednego <link>, na przykład:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

Spowoduje to następującą odpowiedź:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

Jak widać, istnieje 9 różnych plików czcionek, co oznacza łącznie 10 żądań (w tym jeden z elementów łącza), jeśli użytkownik nie ma zainstalowanej lokalnie jednej lub więcej żądanych czcionek. Te żądania są powtarzane przy każdym żądaniu nowej strony w Twojej witrynie (chociaż nie są już przesyłane żadne dane)! Również odpowiedź na żądanie <link>nigdy nie jest buforowana.

Zalecenie: W
końcu naprawdę polecałbym dołączyć pliki czcionek w formacie .woff zakodowanym w Base64 w arkuszu stylów!

Zobacz ten fajny artykuł, aby zobaczyć przykład i opis, jak to zrobić!

Używam metody css inline, ponieważ narzut dodatkowego żądania jest większy niż wzrost rozmiaru podczas kodowania bease64. Jest to również kompensowane przez kompresję gizip przez serwer plików css.

Inną opcją jest użycie asynchronicznego ładowania czcionek, ale najczęściej użytkownicy zobaczą czcionki pojawiające się po załadowaniu.

Niezależnie od metody możesz zmniejszyć rozmiar pliku czcionki, uwzględniając tylko te zestawy znaków, których będziesz używać.

Osobiście korzystam z Google Fonts. Mają spory wybór, a ostatnio poprawili kompresję czcionek, przechodząc również na kompresję Zopfli . Google dąży do przyspieszenia sieci, więc myślę, że w tej części również będzie pochodzić z większej optymalizacji.

Cokolwiek wybierzesz jako outsourcingowe dostarczanie czcionek, zawsze uzyskasz redukcję szybkości w związku z żądaniami uzyskania czcionek. Najlepszą rzeczą, patrząc z perspektywy szybkości, byłoby samodzielne obsługiwanie czcionek. Jeśli nie zależy Ci na tych dodatkowych milisekundach potrzebnych do załadowania z dostawy zleconej na zewnątrz, powinieneś to zrobić, jeśli uważasz, że łatwość korzystania z nich jest warta milisekund.

Nie wiem o Typekicie i innych, ale dzięki czcionkom Google możesz wybrać obsługę określonych podzbiorów i zakresu znaków, aby jeszcze bardziej przyspieszyć dostarczanie.

Wybór podzbioru:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

Wybór zakresu znaków:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Możesz użyć dns-prefetch, aby jeszcze bardziej zwiększyć szybkość dostarczania czcionek.

Myślę i mam nadzieję, że Google zrobi wszystko, co w jego mocy, aby przyspieszyć dostarczanie czcionek tak bardzo, jak tylko może. Milisekundy potrzebne do ich załadowania nie szkodzą mojej stronie, więc z radością ich używam.

Krótko mówiąc:

Jeśli dostarczanie czcionek w milisekundach szkodzi Twojej witrynie, na przykład powodując, że ładuje się dłużej niż zalecana 1 sekunda, myślę, że powinieneś sam je hostować.

Najlepszą opcją jest importowanie czcionek przy użyciu Ajax, tak jak to:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Robię to na mojej stronie i zwiększam o 9 punktów w teście Google Insights.