{"id":38775,"date":"2026-02-07T13:40:51","date_gmt":"2026-02-07T10:40:51","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38775"},"modified":"2026-02-07T13:40:51","modified_gmt":"2026-02-07T10:40:51","slug":"ozel-css-fontlarini-yukleme-ve-kullanma-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ozel-css-fontlarini-yukleme-ve-kullanma-kapsamli-bir-rehber\/","title":{"rendered":"\u00d6zel CSS Fontlar\u0131n\u0131 Y\u00fckleme ve Kullanma: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

\u00d6zel CSS Fontlar\u0131n\u0131 Y\u00fckleme ve Kullanma: Kapsaml\u0131 Bir Rehber<\/h2>\n
Web tasar\u0131m\u0131, g\u00fcn\u00fcm\u00fczde sadece i\u015flevsellikten ibaret de\u011fildir; ayn\u0131 zamanda estetik, marka kimli\u011fi ve kullan\u0131c\u0131 deneyimi gibi unsurlar\u0131 da kapsar. Bu unsurlar\u0131n en \u00f6nemlilerinden biri de tipografidir. Bir web sitesinde kullan\u0131lan fontlar, mesaj\u0131n alg\u0131lan\u0131\u015f bi\u00e7imini, okunabilirli\u011fi ve genel atmosferi do\u011frudan etkiler. Sistem fontlar\u0131 (Times New Roman, Arial, Verdana gibi) her zaman g\u00fcvenli bir se\u00e7enek olsa da, genellikle \u00f6zg\u00fcnl\u00fckten ve marka kimli\u011fini yans\u0131tmaktan uzakt\u0131r. \u0130\u015fte bu noktada \u00f6zel CSS fontlar\u0131 devreye girer.<\/p>\n
Bu kapsaml\u0131 rehberde, web sitelerinizde \u00f6zel fontlar\u0131 nas\u0131l y\u00fckleyece\u011finizi, kullanaca\u011f\u0131n\u0131z\u0131 ve optimize edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Farkl\u0131 font formatlar\u0131ndan performans ipu\u00e7lar\u0131na, lisanslama konular\u0131ndan eri\u015filebilirlik prensiplerine kadar her detay\u0131 inceleyerek, web projelerinizde tipografiyi ustaca y\u00f6netmenizi sa\u011flayacak bilgileri sunaca\u011f\u0131z.<\/p>\n

Web Fontlar\u0131 Neden \u00d6nemli?<\/h3>\n
\u00d6zel web fontlar\u0131, bir web sitesinin g\u00f6rsel kimli\u011fini g\u00fc\u00e7lendiren ve kullan\u0131c\u0131 deneyimini zenginle\u015ftiren kritik bir unsurdur. \u0130\u015fte neden bu kadar \u00f6nemli olduklar\u0131na dair baz\u0131 temel nedenler:<\/p>\n

Marka Kimli\u011fi ve Tutarl\u0131l\u0131k<\/h4>\n
Her markan\u0131n kendine \u00f6zg\u00fc bir g\u00f6rsel dili vard\u0131r ve bu dilin \u00f6nemli bir par\u00e7as\u0131 da kullan\u0131lan tipografidir. \u00d6zel fontlar, markan\u0131z\u0131n bas\u0131l\u0131 materyallerinde, logolar\u0131nda ve di\u011fer dijital varl\u0131klar\u0131nda kulland\u0131\u011f\u0131 fontlarla web siteniz aras\u0131nda tutarl\u0131l\u0131k sa\u011flar. Bu, markan\u0131z\u0131n daha profesyonel, ak\u0131lda kal\u0131c\u0131 ve tan\u0131n\u0131r olmas\u0131na yard\u0131mc\u0131 olur. Sistem fontlar\u0131 kullanmak, markan\u0131z\u0131n kendine \u00f6zg\u00fc sesini ve ki\u015fili\u011fini yans\u0131tma potansiyelini s\u0131n\u0131rlar.<\/p>\n

Tasar\u0131m Esnekli\u011fi ve Estetik<\/h4>\n
\u00d6zel fontlar, tasar\u0131mc\u0131lara \u00e7ok daha geni\u015f bir yarat\u0131c\u0131 \u00f6zg\u00fcrl\u00fck sunar. Y\u00fczlerce hatta binlerce farkl\u0131 font aras\u0131ndan se\u00e7im yapma imkan\u0131, tasar\u0131m\u0131n ruhuna ve amac\u0131na en uygun tipografiyi bulmay\u0131 m\u00fcmk\u00fcn k\u0131lar. Modern, klasik, el yaz\u0131s\u0131, minimalist veya cesur; her t\u00fcrl\u00fc tasar\u0131m vizyonuna uygun bir font bulmak m\u00fcmk\u00fcnd\u00fcr. Bu estetik \u00e7e\u015fitlilik, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131r\u0131r ve ziyaret\u00e7iler \u00fczerinde daha g\u00fc\u00e7l\u00fc bir ilk izlenim b\u0131rak\u0131r.<\/p>\n

Kullan\u0131c\u0131 Deneyimi ve Okunabilirlik<\/h4>\n
Do\u011fru se\u00e7ilmi\u015f bir font, i\u00e7eri\u011fin okunabilirli\u011fini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Baz\u0131 fontlar uzun metinler i\u00e7in daha uygunken, baz\u0131lar\u0131 ba\u015fl\u0131klar veya vurgular i\u00e7in idealdir. \u00d6zel fontlar, i\u00e7eri\u011fin amac\u0131na ve hedef kitlenin okuma al\u0131\u015fkanl\u0131klar\u0131na g\u00f6re optimize edilmi\u015f bir tipografi se\u00e7ene\u011fi sunar. \u0130yi bir okunabilirlik, kullan\u0131c\u0131lar\u0131n sitede daha uzun s\u00fcre kalmas\u0131n\u0131, i\u00e7eri\u011fi daha iyi anlamas\u0131n\u0131 ve genel olarak daha olumlu bir deneyim ya\u015famas\u0131n\u0131 sa\u011flar. K\u00f6t\u00fc se\u00e7ilmi\u015f veya optimize edilmemi\u015f fontlar ise g\u00f6z yorgunlu\u011funa ve h\u0131zl\u0131 site terkine yol a\u00e7abilir.<\/p>\n

Sistem Fontlar\u0131n\u0131n S\u0131n\u0131rl\u0131l\u0131klar\u0131<\/h4>\n
Sistem fontlar\u0131, her bilgisayarda veya i\u015fletim sisteminde \u00f6nceden y\u00fckl\u00fc olan fontlard\u0131r. Bu fontlar evrensel olarak eri\u015filebilir olsalar da, tasar\u0131m a\u00e7\u0131s\u0131ndan olduk\u00e7a k\u0131s\u0131tlay\u0131c\u0131d\u0131r. Bir kullan\u0131c\u0131n\u0131n bilgisayar\u0131nda belirli bir sistem fontu y\u00fckl\u00fc de\u011filse, taray\u0131c\u0131 otomatik olarak ba\u015fka bir yedek (fallback) fonta ge\u00e7er. Bu durum, tasar\u0131m\u0131n beklenenden farkl\u0131 g\u00f6r\u00fcnmesine ve marka kimli\u011finin zarar g\u00f6rmesine neden olabilir. \u00d6zel web fontlar\u0131, bu belirsizli\u011fi ortadan kald\u0131rarak, tasarlad\u0131\u011f\u0131n\u0131z tipografinin her zaman ve her yerde ayn\u0131 \u015fekilde g\u00f6r\u00fcnt\u00fclenmesini garanti eder.<\/p>\n

Font Formatlar\u0131 ve Uyumluluk<\/h3>\n
\u00d6zel fontlar\u0131 web’de kullanabilmek i\u00e7in `@font-face<\/code> CSS kural\u0131n\u0131 anlamak ve farkl\u0131 font formatlar\u0131n\u0131 tan\u0131mak esast\u0131r. Her format\u0131n kendine \u00f6zg\u00fc avantajlar\u0131 ve taray\u0131c\u0131 uyumluluklar\u0131 bulunur.<\/p>\n`

@font-face<\/code> Kural\u0131: Temel Yap\u0131<\/h4>\n@font-face<\/code> kural\u0131, taray\u0131c\u0131ya bir fontu nereden indirece\u011fini ve bu fonta nas\u0131l bir isim verece\u011fini bildiren CSS y\u00f6nergesidir. Temel yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n
@font-face {\n  font-family: 'MyCustomFont'; \/ Fonta verdi\u011fimiz isim <\/em>\/\n  src: url('path\/to\/mycustomfont.woff2') format('woff2'),\n       url('path\/to\/mycustomfont.woff') format('woff');\n  font-weight: normal; \/ Fontun kal\u0131nl\u0131\u011f\u0131 <\/em>\/\n  font-style: normal; \/ Fontun stili (normal, italic) <\/em>\/\n  font-display: swap; \/ Font y\u00fcklenirken nas\u0131l davran\u0131laca\u011f\u0131 <\/em>\/\n}<\/code><\/pre>\nBu kural\u0131 kullanarak, taray\u0131c\u0131ya “MyCustomFont” ad\u0131nda bir font oldu\u011funu ve bu fontun dosyalar\u0131n\u0131n belirli bir konumda bulundu\u011funu bildirmi\u015f oluruz.<\/p>\n
Farkl\u0131 Font Formatlar\u0131<\/h4>\nWeb i\u00e7in \u00e7e\u015fitli font formatlar\u0131 mevcuttur. Taray\u0131c\u0131 uyumlulu\u011funu en \u00fcst d\u00fczeyde tutmak ve performans\u0131 optimize etmek i\u00e7in genellikle birden fazla format\u0131n sa\u011flanmas\u0131 \u00f6nerilir.<\/p>\n
*   EOT (Embedded OpenType):<\/strong>
\n    *   Microsoft taraf\u0131ndan Internet Explorer i\u00e7in geli\u015ftirilmi\u015ftir.
\n    *   Sadece eski Internet Explorer s\u00fcr\u00fcmleri (IE6-IE11) taraf\u0131ndan desteklenir.
\n    *   G\u00fcn\u00fcm\u00fczde kullan\u0131m\u0131 olduk\u00e7a azalm\u0131\u015ft\u0131r, ancak \u00e7ok eski taray\u0131c\u0131 deste\u011fi gerekiyorsa dahil edilebilir.<\/p>\n
*   TTF (TrueType Font):<\/strong>
\n    *   Apple ve Microsoft taraf\u0131ndan geli\u015ftirilen eski bir font format\u0131d\u0131r.
\n    *   Geni\u015f taray\u0131c\u0131 deste\u011fi sunar (Chrome, Firefox, Safari, Edge).
\n    *   Web i\u00e7in optimize edilmemi\u015ftir, bu y\u00fczden dosya boyutlar\u0131 genellikle b\u00fcy\u00fckt\u00fcr.<\/p>\n
*   OTF (OpenType Font):<\/strong>
\n    *   TTF’nin geli\u015fmi\u015f bir versiyonudur ve Adobe ile Microsoft taraf\u0131ndan geli\u015ftirilmi\u015ftir.
\n    *   Daha geli\u015fmi\u015f tipografik \u00f6zellikler (ligat\u00fcrler, alternatif karakterler) sunabilir.
\n    *   TTF gibi, web i\u00e7in \u00f6zel olarak optimize edilmemi\u015ftir ve dosya boyutlar\u0131 b\u00fcy\u00fck olabilir.<\/p>\n
*   WOFF (Web Open Font Format):<\/strong>
\n    *   Mozilla, Microsoft ve Opera taraf\u0131ndan geli\u015ftirilen, web i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f bir formatt\u0131r.
\n    *   TTF\/OTF fontlar\u0131n\u0131 s\u0131k\u0131\u015ft\u0131rarak dosya boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde k\u00fc\u00e7\u00fclt\u00fcr.
\n    *   Modern taray\u0131c\u0131lar\u0131n \u00e7o\u011fu taraf\u0131ndan desteklenir ve \u015fu anda en yayg\u0131n kullan\u0131lan web font formatlar\u0131ndan biridir.<\/p>\n
*   WOFF2 (Web Open Font Format 2.0):<\/strong>
\n    *   WOFF’un daha yeni ve daha verimli bir versiyonudur.
\n    *   WOFF’a g\u00f6re %30’a kadar daha iyi s\u0131k\u0131\u015ft\u0131rma sunar.
\n    *   Modern taray\u0131c\u0131lar (Chrome, Firefox, Safari, Edge) taraf\u0131ndan yayg\u0131n olarak desteklenir. Performans a\u00e7\u0131s\u0131ndan en \u00e7ok tercih edilen formatt\u0131r.<\/p>\n
*   SVG (Scalable Vector Graphics) Fontlar\u0131:<\/strong>
\n    *   Asl\u0131nda bir vekt\u00f6r grafik format\u0131d\u0131r ancak fontlar\u0131 da i\u00e7erebilir.
\n    *   \u00d6zellikle eski iOS taray\u0131c\u0131lar\u0131 (iOS 4.1-4.2) taraf\u0131ndan destekleniyordu.
\n    *   Dosya boyutlar\u0131 genellikle b\u00fcy\u00fckt\u00fcr ve art\u0131k web fontlar\u0131 i\u00e7in \u00f6nerilmez.<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu ve Format Se\u00e7imi Stratejisi<\/h4>\nTaray\u0131c\u0131 uyumlulu\u011funu en \u00fcst d\u00fczeyde tutarken performans\u0131 da g\u00f6z \u00f6n\u00fcnde bulundurmak i\u00e7in genellikle a\u015fa\u011f\u0131daki s\u0131ra tavsiye edilir:<\/p>\n
@font-face {\n  font-family: 'MyCustomFont';\n  src: url('path\/to\/mycustomfont.woff2') format('woff2'), \/ En yeni ve en iyi s\u0131k\u0131\u015ft\u0131rma <\/em>\/\n       url('path\/to\/mycustomfont.woff') format('woff'),   \/ Geni\u015f modern taray\u0131c\u0131 deste\u011fi <\/em>\/\n       url('path\/to\/mycustomfont.ttf') format('truetype'); \/ Daha eski taray\u0131c\u0131lar i\u00e7in fallback <\/em>\/\n  \/ url('path\/to\/mycustomfont.eot?#iefix') format('embedded-opentype'); \/<\/em> \u00c7ok eski IE i\u00e7in \/ <\/em>\/\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap;\n}<\/code><\/pre>\nTaray\u0131c\u0131lar src<\/code> listesini yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru okur ve destekledikleri ilk format\u0131 y\u00fckler. Bu nedenle, en yeni ve en verimli formatlar\u0131 (WOFF2) en \u00fcste koymak, taray\u0131c\u0131n\u0131n m\u00fcmk\u00fcn olan en k\u00fc\u00e7\u00fck dosyay\u0131 indirmesini sa\u011flar.<\/p>\n
\u00d6zel Fontlar\u0131 Y\u00fckleme Y\u00f6ntemleri<\/h3>\n\u00d6zel fontlar\u0131 web sitenize entegre etmenin iki ana y\u00f6ntemi vard\u0131r: kendi sunucunuzda bar\u0131nd\u0131rma veya \u00fc\u00e7\u00fcnc\u00fc taraf hizmetlerini kullanma.<\/p>\n
Kendi Sunucunuzda Bar\u0131nd\u0131rma (@font-face<\/code>)<\/h4>\nBu y\u00f6ntem, font dosyalar\u0131n\u0131 kendi web sunucunuza y\u00fcklemenizi ve @font-face<\/code> kural\u0131n\u0131 kullanarak CSS \u00fczerinden \u00e7a\u011f\u0131rman\u0131z\u0131 i\u00e7erir. Bu size tam kontrol sa\u011flar ve genellikle performans a\u00e7\u0131s\u0131ndan en iyi sonu\u00e7lar\u0131 verir.<\/p>\n
@font-face<\/code> Kural\u0131 Detayl\u0131 Anlat\u0131m<\/h5>\nDaha \u00f6nce bahsetti\u011fimiz @font-face<\/code> kural\u0131n\u0131n her bir \u00f6zelli\u011fini daha yak\u0131ndan inceleyelim:<\/p>\n
*   font-family<\/code>:<\/strong> Bu, fontunuza verece\u011finiz isimdir. Bu ismi daha sonra CSS’nizdeki di\u011fer elementlere fontu uygulamak i\u00e7in kullanacaks\u0131n\u0131z (\u00f6rne\u011fin, body { font-family: 'MyCustomFont', sans-serif; }<\/code>).
\n*   src<\/code>:<\/strong> Font dosyalar\u0131n\u0131n konumunu ve format\u0131n\u0131 belirtir. Taray\u0131c\u0131, belirtilen URL’lerden font dosyas\u0131n\u0131 indirir. Birden fazla url()<\/code> ve format()<\/code> \u00e7ifti belirterek taray\u0131c\u0131ya farkl\u0131 formatlarda font dosyalar\u0131 sunabilirsiniz. Taray\u0131c\u0131, destekledi\u011fi ilk format\u0131 kullan\u0131r.
\n    *   url('path\/to\/font.woff2') format('woff2')<\/code>: url()<\/code> ile dosya yolu, format()<\/code> ile dosyan\u0131n tipi belirtilir.
\n*   font-weight<\/code>:<\/strong> Fontun kal\u0131nl\u0131\u011f\u0131n\u0131 tan\u0131mlar (\u00f6rne\u011fin, normal<\/code> veya 400<\/code> i\u00e7in normal, bold<\/code> veya 700<\/code> i\u00e7in kal\u0131n). Ayn\u0131 font ailesinin farkl\u0131 kal\u0131nl\u0131klar\u0131n\u0131 (light, regular, bold) ayr\u0131 @font-face<\/code> bloklar\u0131 i\u00e7inde tan\u0131mlayarak kullanabilirsiniz.
\n*   font-style<\/code>:<\/strong> Fontun stilini tan\u0131mlar (\u00f6rne\u011fin, normal<\/code> veya italic<\/code>). \u0130talik versiyonlar i\u00e7in ayr\u0131 bir @font-face<\/code> blo\u011fu olu\u015fturulmal\u0131d\u0131r.
\n*   font-display<\/code>:<\/strong> Bu \u00f6zellik, font y\u00fcklenirken metnin taray\u0131c\u0131da nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini kontrol eder. Kullan\u0131c\u0131 deneyimi ve performans a\u00e7\u0131s\u0131ndan \u00e7ok \u00f6nemlidir.
\n    *   auto<\/code><\/strong>: Taray\u0131c\u0131n\u0131n varsay\u0131lan davran\u0131\u015f\u0131n\u0131 kullan\u0131r.
\n    *   block<\/code><\/strong>: Font y\u00fcklenene kadar metni gizler (FOIT – Flash of Invisible Text). Font y\u00fcklendi\u011finde metin g\u00f6r\u00fcn\u00fcr hale gelir. K\u0131sa bir s\u00fcre i\u00e7in bo\u015f bir alan olu\u015fabilir.
\n    *   swap<\/code><\/strong>: Font y\u00fcklenene kadar yedek bir sistem fontu g\u00f6sterir (FOUT – Flash of Unstyled Text). Font y\u00fcklendi\u011finde, metin \u00f6zel font ile de\u011fi\u015ftirilir. Bu, i\u00e7eri\u011fin h\u0131zl\u0131ca g\u00f6r\u00fcnmesini sa\u011flad\u0131\u011f\u0131 i\u00e7in genellikle en iyi se\u00e7enektir.
\n    *   fallback<\/code><\/strong>: swap<\/code>‘a benzer ancak \u00e7ok daha k\u0131sa bir engelleme s\u00fcresi ve \u00e7ok k\u0131sa bir takas s\u00fcresi vard\u0131r. Font \u00e7ok h\u0131zl\u0131 y\u00fcklenmezse, yedek font kal\u0131c\u0131 olarak kullan\u0131l\u0131r.
\n    *   optional<\/code><\/strong>: fallback<\/code>‘a benzer ancak taray\u0131c\u0131n\u0131n fontu y\u00fckleyip y\u00fcklemeyece\u011fine karar vermesine izin verir. Yava\u015f ba\u011flant\u0131larda font hi\u00e7 y\u00fcklenmeyebilir, bu da en h\u0131zl\u0131 y\u00fckleme s\u00fcresini sa\u011flar ancak tasar\u0131m tutarl\u0131l\u0131\u011f\u0131n\u0131 riske atar.<\/p>\n
\u00d6rnek Kod (@font-face<\/code>)<\/h5>\nDiyelim ki “Roboto” fontunun normal ve kal\u0131n versiyonlar\u0131n\u0131 kullanmak istiyorsunuz:<\/p>\n
\/ Roboto Regular <\/em>\/\n@font-face {\n  font-family: 'Roboto';\n  src: url('\/fonts\/roboto-regular.woff2') format('woff2'),\n       url('\/fonts\/roboto-regular.woff') format('woff');\n  font-weight: 400; \/ Normal kal\u0131nl\u0131k <\/em>\/\n  font-style: normal;\n  font-display: swap;\n}\n\n\/ Roboto Bold <\/em>\/\n@font-face {\n  font-family: 'Roboto';\n  src: url('\/fonts\/roboto-bold.woff2') format('woff2'),\n       url('\/fonts\/roboto-bold.woff') format('woff');\n  font-weight: 700; \/ Kal\u0131n <\/em>\/\n  font-style: normal;\n  font-display: swap;\n}<\/code><\/pre>\nBu \u015fekilde, font-family: 'Roboto';<\/code> tan\u0131mlad\u0131\u011f\u0131n\u0131zda, font-weight: 400;<\/code> normal versiyonu, font-weight: 700;<\/code> ise kal\u0131n versiyonu otomatik olarak \u00e7a\u011f\u0131racakt\u0131r.<\/p>\n
Font Dosyalar\u0131n\u0131 Haz\u0131rlama<\/h5>\nGenellikle bir fontu indirirken TTF veya OTF format\u0131nda al\u0131rs\u0131n\u0131z. Bu fontlar\u0131 web i\u00e7in optimize edilmi\u015f WOFF ve WOFF2 formatlar\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek \u00f6nemlidir. Bu i\u015flem i\u00e7in [Font Squirrel’s Webfont Generator](https:\/\/www.fontsquirrel.com\/tools\/webfont-generator) gibi ara\u00e7lar\u0131 kullanabilirsiniz. Bu ara\u00e7lar, y\u00fckledi\u011finiz fontu farkl\u0131 formatlara d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve size haz\u0131r @font-face<\/code> CSS kodu ile birlikte bir ZIP dosyas\u0131 sunar.<\/p>\n
Performans \u0130pu\u00e7lar\u0131 (Kendi Sunucunuzda Bar\u0131nd\u0131rma \u0130\u00e7in)<\/h5>\n*   Subsetting (Alt K\u00fcmeleme):<\/strong> Sadece ihtiyac\u0131n\u0131z olan karakter setlerini (\u00f6rne\u011fin, sadece Latin alfabesi veya belirli semboller) dahil ederek font dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcn. Font Squirrel gibi ara\u00e7lar bu \u00f6zelli\u011fi sunar.
\n*   Woff2\/Woff \u00d6nceli\u011fi:<\/strong> src<\/code> listesinde WOFF2’yi WOFF’un \u00f6n\u00fcne koyun.
\n*   font-display<\/code> Kullan\u0131m\u0131:<\/strong> swap<\/code> de\u011feri, i\u00e7eri\u011fin h\u0131zl\u0131ca g\u00f6r\u00fcnmesini sa\u011flayarak kullan\u0131c\u0131 deneyimini iyile\u015ftirir.
\n*   HTTP\/2 ve CDN Kullan\u0131m\u0131:<\/strong> Font dosyalar\u0131n\u0131 bir CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinden sunmak, kullan\u0131c\u0131lara co\u011frafi olarak daha yak\u0131n sunuculardan y\u00fckleme yaparak h\u0131z\u0131 art\u0131r\u0131r. HTTP\/2 protokol\u00fc de birden fazla dosyan\u0131n ayn\u0131 anda daha verimli y\u00fcklenmesini sa\u011flar.
\n*   preload<\/code> Kullan\u0131m\u0131:<\/strong> Kritik fontlar i\u00e7in <\/code> etiketini <\/code> b\u00f6l\u00fcm\u00fcne ekleyerek taray\u0131c\u0131ya bu fontun \u00f6ncelikli olarak y\u00fcklenmesi gerekti\u011fini bildirebilirsiniz. Bu, FOIT\/FOUT etkisini azaltmaya yard\u0131mc\u0131 olabilir.<\/p>\n
\u00dc\u00e7\u00fcnc\u00fc Taraf Hizmetleri Kullanma (Google Fonts, Adobe Fonts)<\/h4>\nKendi sunucunuzda font bar\u0131nd\u0131rmak yerine, \u00fc\u00e7\u00fcnc\u00fc taraf hizmetlerini kullanmak da pop\u00fcler bir y\u00f6ntemdir. Bu hizmetler, fontlar\u0131n bar\u0131nd\u0131r\u0131lmas\u0131n\u0131, optimizasyonunu ve CDN \u00fczerinden sunulmas\u0131n\u0131 \u00fcstlenir.<\/p>\n
Google Fonts<\/h5>\nGoogle Fonts, web’de en pop\u00fcler ve kullan\u0131m\u0131 kolay font hizmetlerinden biridir. Binlerce \u00fccretsiz font sunar ve entegrasyonu olduk\u00e7a basittir.<\/p>\n
*   Avantajlar\u0131:<\/strong> \u00dccretsiz, geni\u015f font yelpazesi, iyi performans (Google’\u0131n CDN’i sayesinde), kolay entegrasyon, otomatik optimizasyon.
\n*   Nas\u0131l Kullan\u0131l\u0131r:<\/strong>
\n    1.  [fonts.google.com](https:\/\/fonts.google.com\/) adresine gidin ve istedi\u011finiz fontlar\u0131 se\u00e7in.
\n    2.  Se\u00e7ti\u011finiz her font i\u00e7in istedi\u011finiz stilleri (kal\u0131nl\u0131k, italik) belirleyin.
\n    3.  Google, size <\/code> etiketi veya @import<\/code> kural\u0131 sa\u011flayacakt\u0131r.
\n        *   <\/code> etiketi (\u00f6nerilen):<\/strong> HTML’nizin <\/code> b\u00f6l\u00fcm\u00fcne ekleyin.<\/p>\n
\n            \n            <\/code><\/pre>\n            preconnect<\/code> etiketleri, taray\u0131c\u0131ya fontlar\u0131 indirece\u011fi sunucularla ba\u011flant\u0131 kurmaya ba\u015flamas\u0131n\u0131 s\u00f6yleyerek performans\u0131 art\u0131r\u0131r.
\n        *   @import<\/code> kural\u0131:<\/strong> CSS dosyan\u0131z\u0131n en \u00fcst\u00fcne ekleyin.<\/p>\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;700&display=swap');<\/code><\/pre>\n            @import<\/code> kullan\u0131m\u0131, taray\u0131c\u0131n\u0131n fontlar\u0131 indirmeye ba\u015flamadan \u00f6nce t\u00fcm CSS dosyas\u0131n\u0131 indirmesini beklemesi gerekti\u011fi i\u00e7in <\/code> etiketine g\u00f6re daha yava\u015f olabilir.
\n*   Performans \u0130pu\u00e7lar\u0131:<\/strong>
\n    *   Sadece ihtiyac\u0131n\u0131z olan fontlar\u0131 ve stilleri se\u00e7in. Ne kadar \u00e7ok stil eklerseniz, dosya boyutu o kadar b\u00fcy\u00fcr.
\n    *   display=swap<\/code> parametresini URL’ye ekledi\u011finizden emin olun (Google Fonts varsay\u0131lan olarak ekler).
\n    *   preconnect<\/code> ve preload<\/code> (e\u011fer manuel olarak yapmak isterseniz) kullan\u0131n.<\/p>\n
Adobe Fonts (Typekit)<\/h5>\nAdobe Fonts, Adobe Creative Cloud aboneli\u011fi ile birlikte gelen y\u00fcksek kaliteli font k\u00fct\u00fcphanesidir. Profesyonel fontlar ve g\u00fcvenilir bir hizmet sunar.<\/p>\n
*   Avantajlar\u0131:<\/strong> Geni\u015f ve profesyonel font k\u00fct\u00fcphanesi, lisanslama kolayl\u0131\u011f\u0131 (Creative Cloud aboneli\u011fi ile), iyi performans.
\n*   Nas\u0131l Kullan\u0131l\u0131r:<\/strong>
\n    1.  [fonts.adobe.com](https:\/\/fonts.adobe.com\/) adresine gidin ve bir “Web Projesi” olu\u015fturun.
\n    2.  Projenize istedi\u011finiz fontlar\u0131 ekleyin.
\n    3.  Adobe, size HTML’nizin <\/code> b\u00f6l\u00fcm\u00fcne eklemeniz gereken bir JavaScript kodu par\u00e7as\u0131 sa\u011flayacakt\u0131r.<\/p>\n
<\/code><\/pre>\n        veya<\/p>\n