{"id":4644,"date":"2026-02-06T21:48:57","date_gmt":"2026-02-06T18:48:57","guid":{"rendered":"https:\/\/www.dchost.com\/blog\/web-fontlarini-kendin-host-etmek-google-fontstan-self-hosted-woff2ye-gecis\/"},"modified":"2026-02-06T21:48:57","modified_gmt":"2026-02-06T18:48:57","slug":"web-fontlarini-kendin-host-etmek-google-fontstan-self-hosted-woff2ye-gecis","status":"publish","type":"post","link":"https:\/\/www.dchost.com\/blog\/web-fontlarini-kendin-host-etmek-google-fontstan-self-hosted-woff2ye-gecis\/","title":{"rendered":"Web Fontlar\u0131n\u0131 Kendin Host Etmek: Google Fonts\u2019tan Self\u2011Hosted WOFF2\u2019ye Ge\u00e7i\u015f"},"content":{"rendered":"<div class=\"dchost-blog-content-wrapper\"><div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">\u0130&ccedil;indekiler<\/p><ul class=\"toc_list\"><li><a href=\"#Web_fontlarini_kendin_host_etmek_neden_bu_kadar_konusuluyor\"><span class=\"toc_number toc_depth_1\">1<\/span> Web fontlar\u0131n\u0131 kendin host etmek neden bu kadar konu\u015fuluyor?<\/a><\/li><li><a href=\"#Google_Fonts_entegrasyonu_ag_tarafinda_nasil_calisir\"><span class=\"toc_number toc_depth_1\">2<\/span> Google Fonts entegrasyonu a\u011f taraf\u0131nda nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/a><\/li><li><a href=\"#Selfhosted_web_font_mimarisinin_temel_avantajlari\"><span class=\"toc_number toc_depth_1\">3<\/span> Self\u2011hosted web font mimarisinin temel avantajlar\u0131<\/a><\/li><li><a href=\"#Google_Fontstan_selfhosted_WOFF2ye_gecis_Adim_adim_plan\"><span class=\"toc_number toc_depth_1\">4<\/span> Google Fonts\u2019tan self\u2011hosted WOFF2\u2019ye ge\u00e7i\u015f: Ad\u0131m ad\u0131m plan<\/a><ul><li><a href=\"#1_Mevcut_font_envanterini_cikarmak\"><span class=\"toc_number toc_depth_2\">4.1<\/span> 1. Mevcut font envanterini \u00e7\u0131karmak<\/a><\/li><li><a href=\"#2_Font_dosyalarini_indirmek_ve_WOFF2ye_donusturmek\"><span class=\"toc_number toc_depth_2\">4.2<\/span> 2. Font dosyalar\u0131n\u0131 indirmek ve WOFF2\u2019ye d\u00f6n\u00fc\u015ft\u00fcrmek<\/a><\/li><li><a href=\"#3_Subset_ve_unicode-range_planlamak\"><span class=\"toc_number toc_depth_2\">4.3<\/span> 3. Subset ve unicode-range planlamak<\/a><\/li><li><a href=\"#4_Font_dosyalarini_sunucuya_yerlestirmek\"><span class=\"toc_number toc_depth_2\">4.4<\/span> 4. Font dosyalar\u0131n\u0131 sunucuya yerle\u015ftirmek<\/a><\/li><li><a href=\"#5_CSS_icinde_font-face_tanimlarini_yazmak\"><span class=\"toc_number toc_depth_2\">4.5<\/span> 5. CSS i\u00e7inde @font-face tan\u0131mlar\u0131n\u0131 yazmak<\/a><\/li><li><a href=\"#6_HTML_tarafinda_preload_ile_kritik_fontlari_one_almak\"><span class=\"toc_number toc_depth_2\">4.6<\/span> 6. HTML taraf\u0131nda preload ile kritik fontlar\u0131 \u00f6ne almak<\/a><\/li><li><a href=\"#7_Onbellekleme_sikistirma_ve_HTTP23_ayarlari\"><span class=\"toc_number toc_depth_2\">4.7<\/span> 7. \u00d6nbellekleme, s\u0131k\u0131\u015ft\u0131rma ve HTTP\/2\/3 ayarlar\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#Performans_etkilerini_olcmek_Oncesi_ve_sonrasi\"><span class=\"toc_number toc_depth_1\">5<\/span> Performans etkilerini \u00f6l\u00e7mek: \u00d6ncesi ve sonras\u0131<\/a><\/li><li><a href=\"#Gizlilik_ve_uyum_boyutu_Google_Fonts_cagrilari_neden_tartisiliyor\"><span class=\"toc_number toc_depth_1\">6<\/span> Gizlilik ve uyum boyutu: Google Fonts \u00e7a\u011fr\u0131lar\u0131 neden tart\u0131\u015f\u0131l\u0131yor?<\/a><\/li><li><a href=\"#Farkli_proje_tipleri_icin_pratik_senaryolar\"><span class=\"toc_number toc_depth_1\">7<\/span> Farkl\u0131 proje tipleri i\u00e7in pratik senaryolar<\/a><ul><li><a href=\"#WordPress_siteleri\"><span class=\"toc_number toc_depth_2\">7.1<\/span> WordPress siteleri<\/a><\/li><li><a href=\"#Statik_HTML_ve_Jamstack_projeleri\"><span class=\"toc_number toc_depth_2\">7.2<\/span> Statik HTML ve Jamstack projeleri<\/a><\/li><li><a href=\"#SPA_Nextjs_Nuxt_ve_benzeri_modern_frameworkler\"><span class=\"toc_number toc_depth_2\">7.3<\/span> SPA, Next.js, Nuxt ve benzeri modern framework\u2019ler<\/a><\/li><\/ul><\/li><li><a href=\"#DCHost_tarafinda_web_fontlarini_hizlandirmak_icin_neler_yapiyoruz\"><span class=\"toc_number toc_depth_1\">8<\/span> DCHost taraf\u0131nda web fontlar\u0131n\u0131 h\u0131zland\u0131rmak i\u00e7in neler yap\u0131yoruz?<\/a><\/li><li><a href=\"#Kontrol_listesi_Google_Fontstan_selfhosted_WOFF2ye_gecerken_unutulmamasi_gerekenler\"><span class=\"toc_number toc_depth_1\">9<\/span> Kontrol listesi: Google Fonts\u2019tan self\u2011hosted WOFF2\u2019ye ge\u00e7erken unutulmamas\u0131 gerekenler<\/a><\/li><li><a href=\"#Sonuc_Kucuk_bir_adimla_buyuk_bir_hiz_ve_kontrol_kazanabilirsiniz\"><span class=\"toc_number toc_depth_1\">10<\/span> Sonu\u00e7: K\u00fc\u00e7\u00fck bir ad\u0131mla b\u00fcy\u00fck bir h\u0131z ve kontrol kazanabilirsiniz<\/a><\/li><\/ul><\/div>\n<h2><span id=\"Web_fontlarini_kendin_host_etmek_neden_bu_kadar_konusuluyor\">Web fontlar\u0131n\u0131 kendin host etmek neden bu kadar konu\u015fuluyor?<\/span><\/h2>\n<p>Son birka\u00e7 y\u0131lda performans ve gizlilik taraf\u0131nda yap\u0131lan denetimlerde, en \u00e7ok g\u00f6rd\u00fc\u011f\u00fcm\u00fcz tekrar eden bulgulardan biri harici font servisleri oldu. Tasar\u0131m ekipleri do\u011fal olarak Google Fonts gibi servisleri kullanarak h\u0131zl\u0131ca tipografi kararlar\u0131n\u0131 hayata ge\u00e7iriyor; ancak i\u015f Core Web Vitals, gizlilik uyumu ve uzun vadeli kontrol konular\u0131na geldi\u011finde, bu konforun ciddi bir bedeli ortaya \u00e7\u0131k\u0131yor. Ek DNS sorgular\u0131, harici TLS ba\u011flant\u0131lar\u0131, font indirilene kadar bloklanan metinler ve bazen de Avrupa\u2019daki gizlilik reg\u00fclasyonlar\u0131yla \u00e7eli\u015febilen 3. taraf iste\u011fi kay\u0131tlar\u0131\u2026<\/p>\n<p>DCHost taraf\u0131nda hem k\u00fc\u00e7\u00fck kurumsal sitelerde hem de y\u00fcksek trafikli projelerde \u015funu s\u0131k s\u0131k g\u00f6r\u00fcyoruz: Sadece web fontlar\u0131n\u0131 self\u2011hosted WOFF2 yap\u0131s\u0131na ta\u015f\u0131mak bile, LCP ve FCP taraf\u0131nda hissedilir iyile\u015fme sa\u011flayabiliyor. \u00dcstelik bu de\u011fi\u015fiklik, altyap\u0131y\u0131 k\u00f6kten de\u011fi\u015ftirmeyi gerektirmeyen; daha \u00e7ok uygulama katman\u0131nda yap\u0131labilen bir optimizasyon. Bu yaz\u0131da Google Fonts entegrasyonunun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, hangi dar bo\u011fazlar\u0131 yaratt\u0131\u011f\u0131n\u0131, self\u2011hosted WOFF2 mimarisine ad\u0131m ad\u0131m nas\u0131l ge\u00e7ebilece\u011finizi ve t\u00fcm bunlar\u0131n performans ile gizlilik \u00fczerindeki somut etkilerini detayl\u0131 \u015fekilde anlataca\u011f\u0131z.<\/p>\n<h2><span id=\"Google_Fonts_entegrasyonu_ag_tarafinda_nasil_calisir\">Google Fonts entegrasyonu a\u011f taraf\u0131nda nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/span><\/h2>\n<p>Google Fonts bug\u00fcn h\u00e2l\u00e2 en yayg\u0131n kullan\u0131lan web font kaynaklar\u0131ndan biri. \u00c7o\u011fu projede tipik entegrasyon \u015fu \u015fekilde yap\u0131l\u0131yor:<\/p>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\">&lt;link rel='preconnect' href='https:\/\/fonts.googleapis.com'&gt;\n&lt;link rel='preconnect' href='https:\/\/fonts.gstatic.com' crossorigin&gt;\n&lt;link href='https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600&amp;display=swap' rel='stylesheet'&gt;\n<\/code><\/pre>\n<p>Bu sat\u0131rlar asl\u0131nda taray\u0131c\u0131ya \u015funu s\u00f6yler:<\/p>\n<ul>\n<li>\u00d6nce fonts.googleapis.com alan ad\u0131na ba\u011flan, CSS dosyas\u0131n\u0131 al.<\/li>\n<li>CSS i\u00e7inden fonts.gstatic.com alan ad\u0131ndaki WOFF2 dosyalar\u0131n\u0131n adreslerini \u00f6\u011fren.<\/li>\n<li>Sonra her bir font dosyas\u0131 i\u00e7in ayr\u0131 HTTP iste\u011fi g\u00f6nder.<\/li>\n<\/ul>\n<p>Waterfall grafi\u011fine bakt\u0131\u011f\u0131n\u0131zda \u015funu g\u00f6r\u00fcrs\u00fcn\u00fcz:<\/p>\n<ul>\n<li>Ekstra bir DNS \u00e7\u00f6z\u00fcmlemesi ve TCP\/TLS el s\u0131k\u0131\u015fmas\u0131 (iki farkl\u0131 domain i\u00e7in).<\/li>\n<li>\u00d6nce CSS, ard\u0131ndan bu CSS\u2019de referans verilen WOFF2 dosyalar\u0131n\u0131n indirilmesi.<\/li>\n<li>Fontlar tamamlanana kadar metnin ge\u00e7ici olarak g\u00f6r\u00fcnmemesi (FOIT) veya stil de\u011fi\u015fimi (FOUT).<\/li>\n<\/ul>\n<p>Bu ekstra basamaklar; \u00f6zellikle mobil a\u011flarda ve y\u00fcksek gecikmeli ba\u011flant\u0131larda FCP ve LCP metriklerini olumsuz etkiler. Zaten <a href='https:\/\/www.dchost.com\/blog\/core-web-vitals-ve-hosting-altyapisi-ttfb-lcp-ve-clsyi-sunucu-tarafinda-iyilestirme-rehberi\/'>Core Web Vitals ve hosting altyap\u0131s\u0131 ili\u015fkisini anlatt\u0131\u011f\u0131m\u0131z rehberde<\/a> de g\u00f6rebilece\u011finiz gibi, render s\u00fcrecini geciktiren her d\u0131\u015f ba\u011f\u0131ml\u0131l\u0131k, zincirleme \u015fekilde kullan\u0131c\u0131 deneyimini zay\u0131flat\u0131r.<\/p>\n<h2><span id=\"Selfhosted_web_font_mimarisinin_temel_avantajlari\">Self\u2011hosted web font mimarisinin temel avantajlar\u0131<\/span><\/h2>\n<p>Web fontlar\u0131n\u0131 kendi sunucunuzda bar\u0131nd\u0131rd\u0131\u011f\u0131n\u0131zda a\u011f trafi\u011fi \u00e7ok daha sade bir hal al\u0131r:<\/p>\n<ul>\n<li>Taray\u0131c\u0131, font dosyalar\u0131n\u0131 ayn\u0131 origin \u00fczerinden (\u00f6rne\u011fin example.com) \u00e7eker.<\/li>\n<li>Ek DNS ve TLS handshake ihtiyac\u0131 ortadan kalkar.<\/li>\n<li>HTTP\/2 veya HTTP\/3 \u00fczerinden tek ba\u011flant\u0131 ile birden fazla font dosyas\u0131 paralel ta\u015f\u0131n\u0131r.<\/li>\n<li>Cache ve s\u0131k\u0131\u015ft\u0131rma ayarlar\u0131n\u0131 do\u011frudan siz kontrol edersiniz.<\/li>\n<\/ul>\n<p>Somut faydalar\u0131 \u015f\u00f6yle \u00f6zetleyebiliriz:<\/p>\n<ul>\n<li><strong>Daha d\u00fc\u015f\u00fck TTFB ve daha h\u0131zl\u0131 LCP:<\/strong> Taray\u0131c\u0131 yeni bir domain \u00e7\u00f6zmek ve TLS kurmak zorunda kalmaz, kritik fontlar sunucuya giden ilk istek setinin i\u00e7inde h\u0131zla gelir.<\/li>\n<li><strong>\u0130stikrarl\u0131 performans:<\/strong> \u00dc\u00e7\u00fcnc\u00fc taraf CDN taraf\u0131ndaki yo\u011funluk, throttle veya b\u00f6lgesel sorunlar sitenizi etkilemez.<\/li>\n<li><strong>Gizlilik ve uyum:<\/strong> Ziyaret\u00e7i IP adresleri ve user\u2011agent bilgileri harici bir font sa\u011flay\u0131c\u0131s\u0131na g\u00f6nderilmez, KVKK \/ GDPR a\u00e7\u0131s\u0131ndan daha temiz bir model ortaya \u00e7\u0131kar.<\/li>\n<li><strong>\u00d6n bellekleme kontrol\u00fc:<\/strong> max\u2011age, immutable, ETag gibi ba\u015fl\u0131klar\u0131 diledi\u011finiz gibi ayarlayabilirsiniz. Bu konuya benzer mant\u0131kla bakan <a href='https:\/\/www.dchost.com\/blog\/tarayici-ve-cdn-onbelleginde-cache-busting-stratejileri\/'>taray\u0131c\u0131 ve CDN \u00f6nbellek stratejileri rehberimize<\/a> de g\u00f6z atman\u0131z\u0131 \u00f6neririz.<\/li>\n<\/ul>\n<h2><span id=\"Google_Fontstan_selfhosted_WOFF2ye_gecis_Adim_adim_plan\">Google Fonts\u2019tan self\u2011hosted WOFF2\u2019ye ge\u00e7i\u015f: Ad\u0131m ad\u0131m plan<\/span><\/h2>\n<p>\u015eimdi prati\u011fe ge\u00e7elim. A\u015fa\u011f\u0131daki ad\u0131mlar, hem k\u00fc\u00e7\u00fck WordPress sitelerinde hem de \u00f6zel framework kullanan projelerde defalarca uygulad\u0131\u011f\u0131m\u0131z, sahada kendini ispatlam\u0131\u015f bir ak\u0131\u015f.<\/p>\n<h3><span id=\"1_Mevcut_font_envanterini_cikarmak\">1. Mevcut font envanterini \u00e7\u0131karmak<\/span><\/h3>\n<p>\u00d6nce hangi font ailelerini ve varyantlar\u0131n\u0131 kulland\u0131\u011f\u0131n\u0131z\u0131 netle\u015ftirin. \u00c7o\u011fu projede ihtiya\u00e7tan \u00e7ok daha fazla varyant y\u00fcklendi\u011fini g\u00f6r\u00fcyoruz:<\/p>\n<ul>\n<li>Normal, bold, medium, semibold, light\u2026<\/li>\n<li>\u0130talik s\u00fcr\u00fcmler<\/li>\n<li>Latin, Latin\u2011ext, Cyrillic gibi birden fazla dil subset\u2019i<\/li>\n<\/ul>\n<p>Chrome DevTools i\u00e7inde Network sekmesinde type s\u00fctununu font olarak filtreleyip hangi WOFF2 dosyalar\u0131n\u0131n geldi\u011fini g\u00f6rebilirsiniz. Ayr\u0131ca Google Fonts\u2019tan ekledi\u011finiz link etiketine bakarak da hangi aileleri \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131z\u0131 g\u00f6rebilirsiniz.<\/p>\n<p>\u0130lk optimizasyon f\u0131rsat\u0131 genelde burada ortaya \u00e7\u0131kar: Kullan\u0131lmayan a\u011f\u0131rl\u0131k ve stil varyantlar\u0131n\u0131 devreden \u00e7\u0131karmak. Ne kadar az varyant, o kadar az dosya ve o kadar h\u0131zl\u0131 ilk boyama.<\/p>\n<h3><span id=\"2_Font_dosyalarini_indirmek_ve_WOFF2ye_donusturmek\">2. Font dosyalar\u0131n\u0131 indirmek ve WOFF2\u2019ye d\u00f6n\u00fc\u015ft\u00fcrmek<\/span><\/h3>\n<p>\u0130kinci ad\u0131mda, se\u00e7ti\u011finiz font ailelerini indirmeniz gerekiyor. Bunu iki \u015fekilde yapabilirsiniz:<\/p>\n<ul>\n<li>Google Fonts aray\u00fcz\u00fcnden ilgili aileyi se\u00e7ip indir d\u00fc\u011fmesiyle TTF\/OTF paketini almak.<\/li>\n<li>Veya Google Fonts CSS \u00e7\u0131kt\u0131s\u0131ndan WOFF2 adreslerini bulup do\u011frudan indirerek mevcut optimize edilmi\u015f dosyalar\u0131 almak.<\/li>\n<\/ul>\n<p>Standart pratik, modern taray\u0131c\u0131lar i\u00e7in WOFF2 kullanmak ve gerekli g\u00f6r\u00fcyorsan\u0131z \u00e7ok eski taray\u0131c\u0131lar i\u00e7in WOFF fallback b\u0131rakmakt\u0131r. \u00c7o\u011fu yeni projede sadece WOFF2 yeterli olur. Fontlar elinizde TTF\/OTF format\u0131nda ise, yerel makinenizde veya CI pipeline\u2019\u0131n\u0131zda WOFF2\u2019ye d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in fonttools, woff2 gibi ara\u00e7lar kullanabilirsiniz.<\/p>\n<p>Dosyalar\u0131 proje yap\u0131n\u0131zda genelde \u015f\u00f6yle bir hiyerar\u015fide tutmak pratik olur:<\/p>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\">\/assets\/\n  css\/\n  js\/\n  fonts\/\n    inter-400.woff2\n    inter-600.woff2\n<\/code><\/pre>\n<p>Payla\u015f\u0131ml\u0131 hosting kullan\u0131yorsan\u0131z bu klas\u00f6rler public_html alt\u0131nda; <a href=\"https:\/\/www.dchost.com\/tr\/vps\">VPS<\/a> veya <a href=\"https:\/\/www.dchost.com\/tr\/fiziksel-sunucu\">dedicated sunucu<\/a>da ise web root olarak tan\u0131mlad\u0131\u011f\u0131n\u0131z dizinin i\u00e7inde yer alacakt\u0131r. DCHost altyap\u0131s\u0131nda bu yap\u0131y\u0131 ister cPanel ile ister do\u011frudan Nginx\/Apache sanal host ayarlar\u0131yla rahatl\u0131kla kurgulayabilirsiniz.<\/p>\n<h3><span id=\"3_Subset_ve_unicode-range_planlamak\">3. Subset ve unicode-range planlamak<\/span><\/h3>\n<p>Bir di\u011fer b\u00fcy\u00fck kazan\u0131m, font dosyalar\u0131n\u0131z\u0131 ger\u00e7ekten ihtiyac\u0131n\u0131z olan karakter setine indirgemektir. \u00d6rne\u011fin sadece T\u00fcrk\u00e7e ve temel Latin karakterler kullan\u0131yorsan\u0131z; Kiril, Yunanca ya da Asya alfabelerini bar\u0131nd\u0131ran b\u00fcy\u00fck font dosyalar\u0131na ihtiyac\u0131n\u0131z yoktur.<\/p>\n<p>\u0130ki yakla\u015f\u0131m var:<\/p>\n<ul>\n<li>Tek ama optimize edilmi\u015f bir latin\u2011ext dosyas\u0131 kullanmak.<\/li>\n<li>Birden fazla k\u00fc\u00e7\u00fck dosya \u00fcretip unicode\u2011range ile b\u00f6lmek (\u00f6rne\u011fin temel Latin ve Latin\u2011ext\u2019i ay\u0131rmak).<\/li>\n<\/ul>\n<p>\u0130kinci y\u00f6ntemde CSS taraf\u0131nda \u015f\u00f6yle tan\u0131mlar g\u00f6rebilirsiniz:<\/p>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\">@font-face {\n  font-family: 'Inter';\n  src: url('\/assets\/fonts\/inter-latin.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n  unicode-range: U+0000-00FF;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: url('\/assets\/fonts\/inter-latin-ext.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n  unicode-range: U+0100-024F;\n}\n<\/code><\/pre>\n<p>Taray\u0131c\u0131, sayfadaki ger\u00e7ek karakterlere bakarak hangi dosyaya ihtiya\u00e7 oldu\u011funu otomatik se\u00e7er. \u00d6zellikle \u00e7ok dilli b\u00fcy\u00fck projelerde bu yakla\u015f\u0131m ciddi bant geni\u015fli\u011fi tasarrufu sa\u011flayabilir.<\/p>\n<h3><span id=\"4_Font_dosyalarini_sunucuya_yerlestirmek\">4. Font dosyalar\u0131n\u0131 sunucuya yerle\u015ftirmek<\/span><\/h3>\n<p>Fontlar\u0131 d\u00f6n\u00fc\u015ft\u00fcrd\u00fckten sonra, art\u0131k bunlar\u0131 sunucunuza y\u00fckleme a\u015famas\u0131na ge\u00e7ebilirsiniz. DCHost \u00fczerindeki tipik senaryolar:<\/p>\n<ul>\n<li><strong>Payla\u015f\u0131ml\u0131 hosting \/ cPanel:<\/strong> public_html\/assets\/fonts benzeri bir klas\u00f6r a\u00e7\u0131p dosyalar\u0131 FTP, SFTP veya panel dosya y\u00f6neticisi ile y\u00fcklemek.<\/li>\n<li><strong>VPS \/ dedicated sunucu:<\/strong> \/var\/www\/proje-adi\/current\/public\/assets\/fonts gibi bir path alt\u0131nda versiyonlanabilir bir yap\u0131 kurmak.<\/li>\n<\/ul>\n<p>Bu noktada en \u00f6nemli detay, font dosyalar\u0131n\u0131z\u0131n HTTP \u00fczerinden do\u011frudan eri\u015filebilir olmas\u0131 ve do\u011fru MIME tipiyle servis edilmesidir. \u00c7o\u011fu modern web sunucusunda WOFF2 i\u00e7in type otomatik tan\u0131n\u0131r; yine de emin olmak i\u00e7in Nginx veya Apache yap\u0131land\u0131rman\u0131z\u0131 kontrol edebilirsiniz.<\/p>\n<h3><span id=\"5_CSS_icinde_font-face_tanimlarini_yazmak\">5. CSS i\u00e7inde @font-face tan\u0131mlar\u0131n\u0131 yazmak<\/span><\/h3>\n<p>Art\u0131k projenizi Google Fonts CSS \u00e7\u0131kt\u0131s\u0131ndan ay\u0131r\u0131p kendi @font-face tan\u0131mlar\u0131n\u0131z\u0131 yazabilirsiniz. Minimal, modern ve performans dostu bir \u00f6rnek \u015f\u00f6yle olabilir:<\/p>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\">@font-face {\n  font-family: 'Inter';\n  src: local('Inter Regular'),\n       url('\/assets\/fonts\/inter-400.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: local('Inter SemiBold'),\n       url('\/assets\/fonts\/inter-600.woff2') format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n<\/code><\/pre>\n<p>Buradaki kritik noktalar:<\/p>\n<ul>\n<li><strong>local()<\/strong> ifadesi, kullan\u0131c\u0131n\u0131n i\u015fletim sisteminde ayn\u0131 font zaten kuruluysa a\u011f iste\u011fi g\u00f6ndermeden onu kullanman\u0131za imk\u00e2n verir.<\/li>\n<li><strong>font-display: swap<\/strong> ile FOIT yerine, \u00f6nce sistem fontuyla metni g\u00f6sterip font dosyas\u0131 geldi\u011finde yumu\u015fak bir ge\u00e7i\u015f sa\u011flars\u0131n\u0131z.<\/li>\n<li>Sadece ihtiya\u00e7 duydu\u011funuz a\u011f\u0131rl\u0131klar\u0131 tan\u0131mlarsan\u0131z, CSS\u2019iniz sade ve y\u00f6netilebilir kal\u0131r.<\/li>\n<\/ul>\n<p>Ard\u0131ndan body veya ilgili bile\u015fenlerde fontu normal \u015fekilde kullanabilirsiniz:<\/p>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\">body {\n  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n<\/code><\/pre>\n<h3><span id=\"6_HTML_tarafinda_preload_ile_kritik_fontlari_one_almak\">6. HTML taraf\u0131nda preload ile kritik fontlar\u0131 \u00f6ne almak<\/span><\/h3>\n<p>\u00d6zellikle hero alan\u0131nda g\u00f6r\u00fcnen ana metin i\u00e7in kullan\u0131lan font dosyalar\u0131n\u0131 \u00f6n y\u00fcke almak, LCP s\u00fcresini hissedilir bi\u00e7imde d\u00fc\u015f\u00fcrebilir. Bunun i\u00e7in HTML head k\u0131sm\u0131na a\u015fa\u011f\u0131daki gibi preload etiketleri ekleyebilirsiniz:<\/p>\n<pre class=\"language-bash line-numbers\"><code class=\"language-bash\">&lt;link rel='preload'\n      href='\/assets\/fonts\/inter-400.woff2'\n      as='font'\n      type='font\/woff2'\n      crossorigin&gt;\n\n&lt;link rel='preload'\n      href='\/assets\/fonts\/inter-600.woff2'\n      as='font'\n      type='font\/woff2'\n      crossorigin&gt;\n<\/code><\/pre>\n<p>Dikkat edilmesi gerekenler:<\/p>\n<ul>\n<li>Mutlaka as=&#8217;font&#8217; ve type=&#8217;font\/woff2&#8242; kullan\u0131n; aksi halde taray\u0131c\u0131 iste\u011fi do\u011fru kategorize etmeyebilir.<\/li>\n<li>Fontlar CORS gerektirdi\u011fi i\u00e7in crossorigin eklemeyi unutmay\u0131n.<\/li>\n<li>Ger\u00e7ekten kritik olmayan fontlar\u0131 preload etmeyin; gereksiz \u00f6n y\u00fckleme, a\u011f t\u0131kan\u0131kl\u0131\u011f\u0131 yaratabilir.<\/li>\n<\/ul>\n<h3><span id=\"7_Onbellekleme_sikistirma_ve_HTTP23_ayarlari\">7. \u00d6nbellekleme, s\u0131k\u0131\u015ft\u0131rma ve HTTP\/2\/3 ayarlar\u0131<\/span><\/h3>\n<p>Fontlar\u0131n\u0131z art\u0131k kendi sunucunuzda oldu\u011funa g\u00f6re, HTTP ba\u015fl\u0131klar\u0131n\u0131 tam kontrol edebilirsiniz. \u0130yi bir pratik, fontlar\u0131n\u0131z\u0131 uzun s\u00fcreli cache ile sunmakt\u0131r \u00e7\u00fcnk\u00fc \u00e7ok s\u0131k de\u011fi\u015fmezler. Nginx i\u00e7in \u00f6rnek bir ayar:<\/p>\n<pre class=\"language-nginx line-numbers\"><code class=\"language-nginx\">location ~* .(woff2|woff)$ {\n    add_header Cache-Control 'public, max-age=31536000, immutable';\n}\n<\/code><\/pre>\n<p>Ayr\u0131ca font dosyalar\u0131n\u0131z i\u00e7in Brotli veya Gzip s\u0131k\u0131\u015ft\u0131rmas\u0131n\u0131 etkinle\u015ftirmek, \u00f6zellikle yava\u015f ba\u011flant\u0131larda fark yarat\u0131r. Bu konuyu detayl\u0131 anlatt\u0131\u011f\u0131m\u0131z <a href='https:\/\/www.dchost.com\/blog\/brotli-ve-gzip-sikistirma-ayarlari-nginx-apache-ve-litespeedde-core-web-vitals-icin-dogru-konfigurasyon\/'>Brotli ve Gzip s\u0131k\u0131\u015ft\u0131rma ayarlar\u0131 rehberine<\/a> mutlaka g\u00f6z at\u0131n. Fonts gibi statik varl\u0131klar, do\u011fru s\u0131k\u0131\u015ft\u0131rma ve cache ayarlar\u0131yla neredeyse g\u00f6r\u00fcnmez hale getirilebilir.<\/p>\n<p>Sunucunuz HTTP\/2 veya HTTP\/3 destekliyse (DCHost altyap\u0131s\u0131nda bu deste\u011fi yayg\u0131n olarak sa\u011fl\u0131yoruz) tek TCP ba\u011flant\u0131s\u0131 \u00fczerinden t\u00fcm font ve statik dosyalar\u0131n\u0131z paralel ta\u015f\u0131n\u0131r. HTTP protokol s\u00fcr\u00fcmlerinin SEO ve performansa etkisini de <a href='https:\/\/www.dchost.com\/blog\/http-2-ve-http-3-destegi-seo-ve-core-web-vitalsi-nasil-etkiler-hosting-secerken-nelere-bakmali\/'>HTTP\/2 ve HTTP\/3 rehberimizde<\/a> ayr\u0131nt\u0131l\u0131 olarak ele ald\u0131k.<\/p>\n<h2><span id=\"Performans_etkilerini_olcmek_Oncesi_ve_sonrasi\">Performans etkilerini \u00f6l\u00e7mek: \u00d6ncesi ve sonras\u0131<\/span><\/h2>\n<p>Yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikli\u011fin i\u015fe yaray\u0131p yaramad\u0131\u011f\u0131n\u0131 anlaman\u0131n en iyi yolu objektif \u00f6l\u00e7\u00fcm yapmakt\u0131r. Biz genellikle \u015fu yolu izliyoruz:<\/p>\n<ul>\n<li>Google Fonts kullan\u0131lan s\u00fcr\u00fcm i\u00e7in bir h\u0131z raporu almak.<\/li>\n<li>Self\u2011hosted WOFF2 s\u00fcr\u00fcm\u00fcn\u00fc canl\u0131ya ald\u0131ktan sonra ayn\u0131 testleri tekrarlamak.<\/li>\n<li>Network waterfall, FCP, LCP ve CLS metriklerini yan yana k\u0131yaslamak.<\/li>\n<\/ul>\n<p>Bu testler i\u00e7in PageSpeed Insights, WebPageTest veya GTmetrix \u00fc\u00e7l\u00fcs\u00fcn\u00fc kullanmak olduk\u00e7a pratik. \u00d6l\u00e7\u00fcm s\u00fcrecini daha detayl\u0131 anlatmak i\u00e7in haz\u0131rlad\u0131\u011f\u0131m\u0131z <a href='https:\/\/www.dchost.com\/blog\/web-sitenizin-hizini-dogru-olcmek-gtmetrix-pagespeed-insights-ve-webpagetest-rehberi\/'>web sitesi h\u0131z\u0131n\u0131 do\u011fru \u00f6l\u00e7me rehberine<\/a> de mutlaka bakman\u0131z\u0131 \u00f6neririz.<\/p>\n<p>Ger\u00e7ek projelerde \u00e7o\u011fu zaman \u015funlar\u0131 g\u00f6r\u00fcyoruz:<\/p>\n<ul>\n<li>Google Fonts\u2019tan self\u2011hosted WOFF2\u2019ye ge\u00e7i\u015fte LCP\u2019nin 200\u2013400 ms aras\u0131 iyile\u015fmesi.<\/li>\n<li>FOIT yerine font-display: swap ile birlikte metnin \u00e7ok daha erken g\u00f6r\u00fcnmesi.<\/li>\n<li>Harici istek say\u0131s\u0131n\u0131n azalmas\u0131yla birlikte daha temiz waterfall ve daha \u00f6ng\u00f6r\u00fclebilir performans.<\/li>\n<\/ul>\n<p>E\u011fer siteniz yo\u011fun g\u00f6rsel i\u00e7erik de bar\u0131nd\u0131r\u0131yorsa, font optimizasyonunu <a href='https:\/\/www.dchost.com\/blog\/gorsel-seo-ve-hosting-altyapisi-webp-avif-cdn-alt-alan-adlari-ve-gorsel-site-haritasi\/'>g\u00f6rsel optimizasyon ve WebP\/AVIF stratejileri<\/a> ile birle\u015ftirdi\u011finizde, Core Web Vitals taraf\u0131nda olduk\u00e7a g\u00fc\u00e7l\u00fc bir tablo elde edebilirsiniz.<\/p>\n<h2><span id=\"Gizlilik_ve_uyum_boyutu_Google_Fonts_cagrilari_neden_tartisiliyor\">Gizlilik ve uyum boyutu: Google Fonts \u00e7a\u011fr\u0131lar\u0131 neden tart\u0131\u015f\u0131l\u0131yor?<\/span><\/h2>\n<p>Performans taraf\u0131n\u0131n yan\u0131nda, Avrupa\u2019da ve T\u00fcrkiye\u2019de artan gizlilik tart\u0131\u015fmalar\u0131 da web fontlar\u0131n\u0131 kendiniz host etmenizi te\u015fvik ediyor. Harici font servisleri her ziyaret\u00e7ide \u015funlar\u0131 g\u00f6rebilir:<\/p>\n<ul>\n<li>IP adresi<\/li>\n<li>Taray\u0131c\u0131 ve i\u015fletim sistemi bilgisi (user\u2011agent)<\/li>\n<li>Ziyaret zaman\u0131na ili\u015fkin zaman damgas\u0131<\/li>\n<li>Referrer ba\u015fl\u0131\u011f\u0131 \u00fczerinden geldi\u011fi sayfa<\/li>\n<\/ul>\n<p>Bu veriler tek ba\u015f\u0131na ki\u015fisel veri say\u0131lmasa da, IP adresi ile birlikte de\u011ferlendirildi\u011finde KVKK \/ GDPR kapsam\u0131nda yorumlanabiliyor. Baz\u0131 \u00fclkelerde Google Fonts entegrasyonuna ili\u015fkin hukuki kararlar bile verildi. Self\u2011hosted modele ge\u00e7ti\u011finizde, font \u00e7a\u011fr\u0131lar\u0131n\u0131n tamam\u0131 kendi alan ad\u0131n\u0131z \u00fczerinden ger\u00e7ekle\u015fir; \u00fc\u00e7\u00fcnc\u00fc bir tarafa veri aktar\u0131m\u0131 ortadan kalkar.<\/p>\n<p>Bu da hem gizlilik politikalar\u0131n\u0131z\u0131 sadele\u015ftirir hem de hukuki risklerinizi azalt\u0131r. \u00d6zellikle sa\u011fl\u0131k, hukuk, finans gibi hassas veri i\u015fleyen sekt\u00f6rlerde hizmet veriyorsan\u0131z, harici font servislerinden uzak durmak makul bir \u00f6nlem haline geliyor.<\/p>\n<h2><span id=\"Farkli_proje_tipleri_icin_pratik_senaryolar\">Farkl\u0131 proje tipleri i\u00e7in pratik senaryolar<\/span><\/h2>\n<h3><span id=\"WordPress_siteleri\">WordPress siteleri<\/span><\/h3>\n<p>WordPress d\u00fcnyas\u0131nda \u00e7o\u011fu premium tema Google Fonts ile entegre gelir. Self\u2011hosted WOFF2\u2019ye ge\u00e7mek i\u00e7in tipik ak\u0131\u015f \u015f\u00f6yle:<\/p>\n<ol>\n<li>Tema ayarlar\u0131nda Google Fonts \u00e7a\u011fr\u0131lar\u0131n\u0131 devre d\u0131\u015f\u0131 b\u0131rakmak (m\u00fcmk\u00fcnse).<\/li>\n<li>Kulland\u0131\u011f\u0131n\u0131z font ailelerini tespit edip WOFF2 olarak projeye eklemek.<\/li>\n<li>Child theme veya \u00f6zel bir CSS dosyas\u0131nda @font-face tan\u0131mlar\u0131n\u0131 yazmak.<\/li>\n<li>Header i\u00e7inde preload etiketleri eklemek.<\/li>\n<\/ol>\n<p>B\u00fcy\u00fck WooCommerce ma\u011fazalar\u0131nda, bu de\u011fi\u015fikli\u011fi cache stratejileriyle birlikte ele almak \u00e7ok daha iyi sonu\u00e7 veriyor. \u00d6rne\u011fin \u00fcr\u00fcn listeleme sayfalar\u0131n\u0131n HTML \u00e7\u0131kt\u0131s\u0131n\u0131 \u00f6nbelle\u011fe al\u0131rken, fontlar\u0131 da agresif cache ile servis etmek; hem TTFB\u2019yi hem de LCP\u2019yi a\u015fa\u011f\u0131 \u00e7eker. Bu yakla\u015f\u0131m\u0131 <a href='https:\/\/www.dchost.com\/blog\/woocommerce-icin-cdn-ve-onbellek-ayarlari-sepet-ve-odeme-sayfalarini-bozmadan-hizlanmak\/'>WooCommerce i\u00e7in CDN ve \u00f6nbellek ayarlar\u0131 rehberimiz<\/a> ile harmanlayarak g\u00fc\u00e7l\u00fc bir yap\u0131 kurabilirsiniz.<\/p>\n<h3><span id=\"Statik_HTML_ve_Jamstack_projeleri\">Statik HTML ve Jamstack projeleri<\/span><\/h3>\n<p>Statik sitelerde i\u015fler daha da basit. Build a\u015famas\u0131nda t\u00fcm CSS ve font referanslar\u0131n\u0131 kontrol edebildi\u011finiz i\u00e7in, Google Fonts \u00e7a\u011fr\u0131lar\u0131n\u0131 tamamen kald\u0131r\u0131p kendi WOFF2 dosyalar\u0131n\u0131za y\u00f6nlendirmek olduk\u00e7a kolayd\u0131r. Statik site jenerat\u00f6rleriyle \u00e7al\u0131\u015fan m\u00fc\u015fterilerimizde s\u0131k\u00e7a yapt\u0131\u011f\u0131m\u0131z pratiklerden baz\u0131lar\u0131:<\/p>\n<ul>\n<li>Build pipeline\u2019\u0131na font subset ve WOFF2 d\u00f6n\u00fc\u015ft\u00fcrme ad\u0131m\u0131 eklemek.<\/li>\n<li>Output klas\u00f6r\u00fc i\u00e7inde fonts dizinini otomatik olu\u015fturmak.<\/li>\n<li>CDN \u00f6nbelleklemesini uzun s\u00fcreli olacak \u015fekilde ayarlamak.<\/li>\n<\/ul>\n<p>Statik yap\u0131lar\u0131n hosting taraf\u0131ndaki avantajlar\u0131n\u0131 <a href='https:\/\/www.dchost.com\/blog\/statik-site-hosting-rehberi-jamstack-cdn-ve-vps-ile-asiri-hizli-web-siteleri-kurmak\/'>Jamstack ve statik site hosting rehberimizde<\/a> detayl\u0131 anlatt\u0131k. Self\u2011hosted fontlar, bu mimarinin do\u011fal bir uzant\u0131s\u0131 gibi d\u00fc\u015f\u00fcn\u00fclebilir.<\/p>\n<h3><span id=\"SPA_Nextjs_Nuxt_ve_benzeri_modern_frameworkler\">SPA, Next.js, Nuxt ve benzeri modern framework\u2019ler<\/span><\/h3>\n<p>Next.js, Nuxt gibi framework\u2019lerde genellikle bir asset pipeline\u2019\u0131n\u0131z zaten vard\u0131r. Burada dikkat edilmesi gerekenler:<\/p>\n<ul>\n<li>Global layout veya _document benzeri dosyalarda preload etiketlerini eklemek.<\/li>\n<li>CSS\u2011in\u2011JS veya module CSS kullan\u0131yorsan\u0131z, @font-face tan\u0131mlar\u0131n\u0131 tek bir global dosyada toplamak.<\/li>\n<li>SSR\/SSG senaryolar\u0131nda font dosyalar\u0131n\u0131n build \u00e7\u0131kt\u0131s\u0131nda ger\u00e7ekten mevcut oldu\u011fundan emin olmak.<\/li>\n<\/ul>\n<p>DCHost \u00fczerinde bu t\u00fcr uygulamalar\u0131 host ederken genellikle font ve di\u011fer statik varl\u0131klar\u0131 ayn\u0131 origin\u2019de, ancak ayr\u0131 bir path alt\u0131nda (\u00f6rne\u011fin \/_assets) konumland\u0131rmay\u0131 \u00f6neriyoruz. Bu sayede cache ve g\u00fcvenlik politikalar\u0131n\u0131 daha rahat y\u00f6netebiliyorsunuz.<\/p>\n<h2><span id=\"DCHost_tarafinda_web_fontlarini_hizlandirmak_icin_neler_yapiyoruz\">DCHost taraf\u0131nda web fontlar\u0131n\u0131 h\u0131zland\u0131rmak i\u00e7in neler yap\u0131yoruz?<\/span><\/h2>\n<p>Altyap\u0131 seviyesinde do\u011fru ayarlar yap\u0131lmad\u0131\u011f\u0131nda, self\u2011hosted fontlar\u0131n potansiyelinden tam olarak faydalanmak zorla\u015f\u0131yor. DCHost olarak sahada en s\u0131k uygulad\u0131\u011f\u0131m\u0131z optimizasyonlar \u015funlar:<\/p>\n<ul>\n<li><strong>HTTP\/2 ve HTTP\/3 deste\u011fi:<\/strong> Fontlar da dahil t\u00fcm statik varl\u0131klar tek ba\u011flant\u0131 \u00fczerinden paralel ta\u015f\u0131n\u0131r.<\/li>\n<li><strong>Brotli ve Gzip s\u0131k\u0131\u015ft\u0131rma:<\/strong> WOFF2 zaten s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f bir format olsa da, do\u011fru sunucu ayarlar\u0131yla ilave kazan\u00e7lar elde edilebiliyor.<\/li>\n<li><strong>Uzun \u00f6m\u00fcrl\u00fc cache ba\u015fl\u0131klar\u0131:<\/strong> Font dosyalar\u0131 i\u00e7in public, max-age=31536000, immutable gibi ba\u015fl\u0131klar\u0131 uygulamaya haz\u0131r \u015fablonlar ile \u00f6neriyoruz.<\/li>\n<li><strong>NVMe diskler:<\/strong> Y\u00fcksek IOPS sayesinde, yo\u011fun trafikli ortamlarda bile font dosyalar\u0131na eri\u015fim gecikmesi minimumda kal\u0131yor.<\/li>\n<\/ul>\n<p>T\u00fcm bunlar, sitenizin Core Web Vitals metriklerini toparlarken uygulama katman\u0131nda yapt\u0131\u011f\u0131n\u0131z optimizasyonlarla birle\u015fti\u011finde anlam kazan\u0131yor. Zaten <a href='https:\/\/www.dchost.com\/blog\/core-web-vitalsi-hosting-tarafinda-iyilestirmek\/'>Core Web Vitals\u2019\u0131 hosting taraf\u0131nda iyile\u015ftirmek<\/a> i\u00e7in haz\u0131rlad\u0131\u011f\u0131m\u0131z rehberde de vurgulad\u0131\u011f\u0131m\u0131z gibi, sunucu ve uygulama optimizasyonu birbirini tamamlayan iki par\u00e7adan ibaret.<\/p>\n<h2><span id=\"Kontrol_listesi_Google_Fontstan_selfhosted_WOFF2ye_gecerken_unutulmamasi_gerekenler\">Kontrol listesi: Google Fonts\u2019tan self\u2011hosted WOFF2\u2019ye ge\u00e7erken unutulmamas\u0131 gerekenler<\/span><\/h2>\n<p>Yaz\u0131y\u0131 bitirirken, uygulama s\u0131ras\u0131nda elinizin alt\u0131nda bulunmas\u0131 i\u00e7in k\u0131sa ama pratik bir kontrol listesi b\u0131rakal\u0131m:<\/p>\n<ul>\n<li>Kulland\u0131\u011f\u0131n\u0131z font ailelerini, a\u011f\u0131rl\u0131klar\u0131 ve stil varyantlar\u0131n\u0131 netle\u015ftirin.<\/li>\n<li>Gereksiz varyantlar\u0131 eleyin; m\u00fcmk\u00fcn oldu\u011funca az dosya ile ba\u015flay\u0131n.<\/li>\n<li>Fontlar\u0131 TTF\/OTF veya do\u011frudan WOFF2 olarak indirin, gerekirse d\u00f6n\u00fc\u015ft\u00fcr\u00fcn.<\/li>\n<li>Projede tutarl\u0131 bir fonts klas\u00f6r yap\u0131s\u0131 olu\u015fturun.<\/li>\n<li>@font-face tan\u0131mlar\u0131n\u0131 kendi CSS\u2019inizde olu\u015fturun; font-display: swap kullan\u0131n.<\/li>\n<li>Kritik fontlar i\u00e7in preload etiketlerini head i\u00e7ine ekleyin.<\/li>\n<li>Sunucuda do\u011fru MIME tipleri, cache ba\u015fl\u0131klar\u0131 ve s\u0131k\u0131\u015ft\u0131rma ayarlar\u0131n\u0131 kontrol edin.<\/li>\n<li>Canl\u0131ya almadan \u00f6nce PageSpeed Insights ve WebPageTest ile test yap\u0131n.<\/li>\n<li>Ge\u00e7i\u015ften sonra Core Web Vitals ve hata loglar\u0131n\u0131 bir s\u00fcre daha izlemeye devam edin.<\/li>\n<\/ul>\n<h2><span id=\"Sonuc_Kucuk_bir_adimla_buyuk_bir_hiz_ve_kontrol_kazanabilirsiniz\">Sonu\u00e7: K\u00fc\u00e7\u00fck bir ad\u0131mla b\u00fcy\u00fck bir h\u0131z ve kontrol kazanabilirsiniz<\/span><\/h2>\n<p>Web fontlar\u0131n\u0131 kendiniz host etmek, k\u00e2\u011f\u0131t \u00fczerinde ufak bir de\u011fi\u015fiklik gibi g\u00f6r\u00fcnse de, pratikte hem performans hem de gizlilik taraf\u0131nda ciddi kazan\u0131mlar sa\u011flayan bir ad\u0131m. Google Fonts entegrasyonunu kald\u0131r\u0131p self\u2011hosted WOFF2 yap\u0131s\u0131na ge\u00e7ti\u011finizde; daha d\u00fc\u015f\u00fck LCP, daha h\u0131zl\u0131 ilk boyama, daha sade bir a\u011f trafi\u011fi ve \u00fc\u00e7\u00fcnc\u00fc taraflara daha az veri aktar\u0131m\u0131 elde ediyorsunuz. \u00dcstelik bunu yapmak i\u00e7in devasa bir mimari d\u00f6n\u00fc\u015f\u00fcme de ihtiyac\u0131n\u0131z yok; \u00e7o\u011fu zaman do\u011fru dosya yap\u0131s\u0131, birka\u00e7 @font-face tan\u0131m\u0131 ve d\u00fczg\u00fcn yap\u0131land\u0131r\u0131lm\u0131\u015f bir web sunucusu yeterli oluyor.<\/p>\n<p>E\u011fer sitenizi DCHost \u00fczerinde bar\u0131nd\u0131r\u0131yor veya projelerinizi yeni bir altyap\u0131ya ta\u015f\u0131may\u0131 planl\u0131yorsan\u0131z, font optimizasyonunu genel performans stratejinizin do\u011fal bir par\u00e7as\u0131 haline getirmenizi \u00f6neririz. Mevcut hosting paketinizde HTTP\/2\/3, Brotli, \u00f6nbellekleme ba\u015fl\u0131klar\u0131 ve benzeri konularda nas\u0131l iyile\u015ftirmeler yapabilece\u011finizi birlikte g\u00f6zden ge\u00e7irmek isterseniz, ekibimiz bu s\u00fcreci ad\u0131m ad\u0131m planlaman\u0131za yard\u0131mc\u0131 olabilir. Bug\u00fcn sadece fontlar\u0131 kendi sunucunuza alarak ba\u015flay\u0131n; sonras\u0131nda g\u00f6rseller, cache ve CDN taraf\u0131nda yapaca\u011f\u0131n\u0131z ek optimizasyonlarla sitenizi bir \u00fcst lige ta\u015f\u0131mak \u00e7ok daha kolay hale gelecek.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0130&ccedil;indekiler1 Web fontlar\u0131n\u0131 kendin host etmek neden bu kadar konu\u015fuluyor?2 Google Fonts entegrasyonu a\u011f taraf\u0131nda nas\u0131l \u00e7al\u0131\u015f\u0131r?3 Self\u2011hosted web font mimarisinin temel avantajlar\u01314 Google Fonts\u2019tan self\u2011hosted WOFF2\u2019ye ge\u00e7i\u015f: Ad\u0131m ad\u0131m plan4.1 1. Mevcut font envanterini \u00e7\u0131karmak4.2 2. Font dosyalar\u0131n\u0131 indirmek ve WOFF2\u2019ye d\u00f6n\u00fc\u015ft\u00fcrmek4.3 3. Subset ve unicode-range planlamak4.4 4. Font dosyalar\u0131n\u0131 sunucuya yerle\u015ftirmek4.5 5. CSS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4645,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-4644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teknoloji"],"_links":{"self":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts\/4644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/comments?post=4644"}],"version-history":[{"count":0,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts\/4644\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media\/4645"}],"wp:attachment":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media?parent=4644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/categories?post=4644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/tags?post=4644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}