{"id":36916,"date":"2025-12-24T22:40:44","date_gmt":"2025-12-24T19:40:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36916"},"modified":"2025-12-24T22:40:44","modified_gmt":"2025-12-24T19:40:44","slug":"csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/","title":{"rendered":"CSS’te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon"},"content":{"rendered":"

<\/p>\n

CSS’te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon<\/h2>\n

Giri\u015f: Web Tasar\u0131m\u0131nda Fontlar\u0131n Rol\u00fc ve Kar\u015f\u0131la\u015f\u0131lan Zorluklar<\/h3>\n

Web tasar\u0131m\u0131, kullan\u0131c\u0131 deneyiminin temel ta\u015flar\u0131ndan biridir ve bu deneyimin \u00f6nemli bir par\u00e7as\u0131 da tipografidir. Do\u011fru font se\u00e7imi, bir markan\u0131n kimli\u011fini yans\u0131t\u0131r, okunabilirli\u011fi art\u0131r\u0131r ve sitenin genel esteti\u011fini belirler. Ancak, web’de \u00f6zel fontlar kullanmak, beraberinde baz\u0131 teknik zorluklar\u0131 da getirir. Taray\u0131c\u0131lar\u0131n varsay\u0131lan fontlar\u0131 d\u0131\u015f\u0131nda \u00f6zel bir font kullanmak istedi\u011fimizde, bu fontun kullan\u0131c\u0131n\u0131n cihaz\u0131na indirilmesi ve taray\u0131c\u0131 taraf\u0131ndan do\u011fru bir \u015fekilde i\u015flenmesi gerekir. Bu s\u00fcre\u00e7, sayfa y\u00fckleme h\u0131z\u0131n\u0131 etkileyebilir, metinlerin ge\u00e7ici olarak g\u00f6r\u00fcnmez olmas\u0131na (FOIT – Flash of Invisible Text) veya stilize edilmemi\u015f bir fontla g\u00f6r\u00fcnmesine (FOUT – Flash of Unstyled Text) neden olabilir.<\/p>\n

Modern web geli\u015ftirme standartlar\u0131, bu sorunlar\u0131 a\u015fmak ve \u00f6zel fontlar\u0131 hem estetik hem de performans a\u00e7\u0131s\u0131ndan en verimli \u015fekilde kullanmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar: CSS’in @font-face<\/code> kural\u0131 ve font-display<\/code> \u00f6zelli\u011fi. Bu makalede, @font-face<\/code> kural\u0131n\u0131n temelden ileri seviyeye t\u00fcm y\u00f6nlerini, farkl\u0131 font formatlar\u0131n\u0131, taray\u0131c\u0131 uyumlulu\u011funu ve font-display<\/code> \u00f6zelli\u011finin font y\u00fckleme davran\u0131\u015f\u0131n\u0131 nas\u0131l optimize etti\u011fini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, web sitelerinizde \u00f6zel fontlar\u0131 tan\u0131mlarken kar\u015f\u0131la\u015fabilece\u011finiz t\u00fcm senaryolara haz\u0131rl\u0131kl\u0131 olman\u0131z\u0131 sa\u011flamak ve en iyi uygulamalar\u0131 benimsemenize yard\u0131mc\u0131 olmakt\u0131r.<\/p>\n

@font-face Kural\u0131na Derinlemesine Bak\u0131\u015f<\/h3>\n

@font-face<\/code> kural\u0131, web geli\u015ftiricilerinin kendi \u00f6zel fontlar\u0131n\u0131 tan\u0131mlamas\u0131na ve bir web sayfas\u0131nda kullanmas\u0131na olanak tan\u0131yan CSS kural\u0131d\u0131r. Bu kural sayesinde, tasar\u0131mc\u0131lar ve geli\u015ftiriciler, kullan\u0131c\u0131n\u0131n sisteminde y\u00fckl\u00fc olmayan fontlar\u0131 bile kullanabilirler. Ancak, bu fontlar\u0131n do\u011fru bir \u015fekilde tan\u0131mlanmas\u0131 ve sunulmas\u0131 kritik \u00f6neme sahiptir.<\/p>\n

Temel S\u00f6zdizimi ve Bile\u015fenleri<\/h4>\n

Bir @font-face<\/code> kural\u0131 genellikle a\u015fa\u011f\u0131daki \u00f6zellikleri i\u00e7erir:<\/p>\n

* font-family<\/code><\/strong>: Bu \u00f6zellik, tan\u0131mlad\u0131\u011f\u0131n\u0131z \u00f6zel fonta verece\u011finiz ad\u0131 belirler. Bu ad, daha sonra CSS’inizde (\u00f6rne\u011fin, body { font-family: \"MyCustomFont\", sans-serif; }<\/code>) bu fontu \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131l\u0131r. T\u0131rnak i\u015faretleri i\u00e7inde belirtilmesi tavsiye edilir, \u00f6zellikle font ad\u0131nda bo\u015fluk varsa.
\n* src<\/code><\/strong>: Bu, font dosyas\u0131n\u0131n konumunu ve format\u0131n\u0131 belirten en \u00f6nemli \u00f6zelliktir. Taray\u0131c\u0131, burada belirtilen URL’lerden font dosyas\u0131n\u0131 indirmeye \u00e7al\u0131\u015f\u0131r. Birden fazla URL ve format belirtmek, farkl\u0131 taray\u0131c\u0131lar\u0131n farkl\u0131 formatlar\u0131 desteklemesi nedeniyle iyi bir uygulamad\u0131r.
\n * url()<\/code><\/strong>: Font dosyas\u0131n\u0131n mutlak veya g\u00f6receli yolunu belirtir.
\n * format()<\/code><\/strong>: url()<\/code> ile belirtilen font dosyas\u0131n\u0131n format\u0131n\u0131 taray\u0131c\u0131ya bildirir. Bu, taray\u0131c\u0131n\u0131n desteklemedi\u011fi formatlar\u0131 indirmeye \u00e7al\u0131\u015fmas\u0131n\u0131 engeller ve performans\u0131 art\u0131r\u0131r. \u00d6rnek formatlar: 'woff2'<\/code>, 'woff'<\/code>, 'truetype'<\/code>, 'opentype'<\/code>, 'svg'<\/code>, 'embedded-opentype'<\/code>.
\n * local()<\/code><\/strong>: Bu fonksiyon, kullan\u0131c\u0131n\u0131n bilgisayar\u0131nda zaten y\u00fckl\u00fc olan bir fontu kontrol etmenizi sa\u011flar. E\u011fer belirtilen font yerel olarak bulunursa, taray\u0131c\u0131 bu fontu kullan\u0131r ve sunucudan indirme ihtiyac\u0131n\u0131 ortadan kald\u0131rarak performans\u0131 art\u0131r\u0131r.
\n* font-weight<\/code><\/strong>: Bu \u00f6zellik, tan\u0131mlanan fontun hangi kal\u0131nl\u0131kta oldu\u011funu belirtir (\u00f6rn. normal<\/code>, bold<\/code>, 100<\/code>, 400<\/code>, 700<\/code>). Farkl\u0131 a\u011f\u0131rl\u0131klar i\u00e7in ayr\u0131 @font-face<\/code> tan\u0131mlar\u0131 yaparak, taray\u0131c\u0131n\u0131n do\u011fru font dosyas\u0131n\u0131 y\u00fcklemesini sa\u011flars\u0131n\u0131z.
\n* font-style<\/code><\/strong>: Fontun stilini belirtir (\u00f6rn. normal<\/code>, italic<\/code>, oblique<\/code>). \u0130talik versiyonlar i\u00e7in de ayr\u0131 @font-face<\/code> tan\u0131mlar\u0131 yapmak en iyi yakla\u015f\u0131md\u0131r.
\n* font-stretch<\/code><\/strong>: Fontun geni\u015fli\u011fini belirtir (\u00f6rn. normal<\/code>, condensed<\/code>, expanded<\/code>). De\u011fi\u015fken fontlarla daha alakal\u0131 bir \u00f6zelliktir.
\n* unicode-range<\/code><\/strong>: Bu \u00f6zellik, font dosyas\u0131n\u0131n kapsad\u0131\u011f\u0131 Unicode karakter aral\u0131\u011f\u0131n\u0131 belirlemenizi sa\u011flar. Bu, \u00f6zellikle \u00e7ok dilli sitelerde veya sadece belirli karakter setlerine ihtiyac\u0131n\u0131z oldu\u011funda b\u00fcy\u00fck performans avantajlar\u0131 sunar. \u00d6rne\u011fin, sadece Latin alfabesi karakterlerini i\u00e7eren bir font dosyas\u0131 i\u00e7in unicode-range: U+000-5FF;<\/code> belirtebilirsiniz. Bu sayede, taray\u0131c\u0131 yaln\u0131zca ihtiya\u00e7 duydu\u011fu alt k\u00fcme font dosyas\u0131n\u0131 indirir, b\u00fcy\u00fck font dosyalar\u0131n\u0131n tamam\u0131n\u0131 de\u011fil.<\/p>\n

@font-face {\n  font-family: 'MyCustomFont';\n  src: local('My Custom Font'),\n       url('\/fonts\/MyCustomFont-Regular.woff2') format('woff2'),\n       url('\/fonts\/MyCustomFont-Regular.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap; \/ Daha sonra detayl\u0131ca inceleyece\u011fiz <\/em>\/\n}\n\n@font-face {\n  font-family: 'MyCustomFont';\n  src: local('My Custom Font Bold'),\n       url('\/fonts\/MyCustomFont-Bold.woff2') format('woff2'),\n       url('\/fonts\/MyCustomFont-Bold.woff') format('woff');\n  font-weight: bold;\n  font-style: normal;\n  font-display: swap;\n}<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, ayn\u0131 font-family<\/code> ad\u0131 alt\u0131nda farkl\u0131 font-weight<\/code> de\u011ferleri i\u00e7in iki ayr\u0131 @font-face<\/code> kural\u0131 tan\u0131mlanm\u0131\u015ft\u0131r. Bu, taray\u0131c\u0131n\u0131n CSS’te font-weight: bold;<\/code> kullan\u0131ld\u0131\u011f\u0131nda otomatik olarak do\u011fru font dosyas\u0131n\u0131 y\u00fcklemesini sa\u011flar.<\/p>\n
@font-face ile Font Y\u00fckleme Stratejileri<\/h4>\n
Her font a\u011f\u0131rl\u0131\u011f\u0131 (regular, bold, light vb.) ve her stil (normal, italic) i\u00e7in ayr\u0131 bir @font-face<\/code> blo\u011fu tan\u0131mlamak en iyi uygulamad\u0131r. Bu, taray\u0131c\u0131n\u0131n yaln\u0131zca ihtiya\u00e7 duydu\u011fu font varyantlar\u0131n\u0131 indirmesini sa\u011flar. \u00d6rne\u011fin, bir sayfada yaln\u0131zca regular ve bold font kullan\u0131l\u0131yorsa, italic veya light varyantlar\u0131n\u0131n indirilmesine gerek kalmaz. Bu, sayfa y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n
Font Formatlar\u0131 ve Taray\u0131c\u0131 Uyumlulu\u011fu<\/h3>\n
Web fontlar\u0131 i\u00e7in bir\u00e7ok farkl\u0131 format bulunmaktad\u0131r ve her birinin kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r. Taray\u0131c\u0131 uyumlulu\u011funu sa\u011flamak ve en iyi performans\u0131 elde etmek i\u00e7in birden fazla format\u0131 sunmak genellikle gereklidir.<\/p>\n
*   WOFF2 (Web Open Font Format 2.0)<\/strong>: \u015eu anda en iyi s\u0131k\u0131\u015ft\u0131rma oran\u0131na sahip ve en yeni format\u0131d\u0131r. Modern taray\u0131c\u0131lar taraf\u0131ndan geni\u015f \u00e7apta desteklenir. En k\u00fc\u00e7\u00fck dosya boyutunu sundu\u011fu i\u00e7in ilk tercihiniz olmal\u0131d\u0131r.
\n*   WOFF (Web Open Font Format)<\/strong>: WOFF2’den \u00f6nce gelen, iyi s\u0131k\u0131\u015ft\u0131rma oran\u0131na sahip ve geni\u015f taray\u0131c\u0131 deste\u011fi sunan bir formatt\u0131r. WOFF2’yi desteklemeyen taray\u0131c\u0131lar i\u00e7in iyi bir yedektir.
\n*   TTF (TrueType Font) \/ OTF (OpenType Font)<\/strong>: Geni\u015f bir kullan\u0131m alan\u0131na sahip geleneksel masa\u00fcst\u00fc font formatlar\u0131d\u0131r. Web i\u00e7in s\u0131k\u0131\u015ft\u0131rmalar\u0131 WOFF\/WOFF2 kadar iyi de\u011fildir, bu y\u00fczden genellikle daha b\u00fcy\u00fck dosya boyutlar\u0131na sahiptirler. Eski taray\u0131c\u0131lar veya WOFF\/WOFF2’yi desteklemeyen nadir durumlar i\u00e7in yedek olarak kullan\u0131labilirler.
\n*   EOT (Embedded OpenType)<\/strong>: Microsoft taraf\u0131ndan geli\u015ftirilmi\u015f, \u00f6zellikle Internet Explorer 6-11 i\u00e7in tasarlanm\u0131\u015f bir formatt\u0131r. Modern web siteleri i\u00e7in \u00f6nemi azalm\u0131\u015ft\u0131r, ancak \u00e7ok eski IE s\u00fcr\u00fcmlerini hedefliyorsan\u0131z dahil edilebilir.
\n*   SVG (Scalable Vector Graphics)<\/strong>: SVG format\u0131ndaki fontlar, eski iOS s\u00fcr\u00fcmleri (4.1 ve alt\u0131) i\u00e7in kullan\u0131l\u0131rd\u0131. G\u00fcn\u00fcm\u00fczde neredeyse hi\u00e7 kullan\u0131lmaz.<\/p>\n
“Bulletproof” @font-face S\u00f6zdizimi<\/h4>\n
Taray\u0131c\u0131 uyumlulu\u011funu en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in, font dosyalar\u0131n\u0131 src<\/code> \u00f6zelli\u011fi i\u00e7inde belirli bir s\u0131rayla listelemek yayg\u0131n bir uygulamad\u0131r. Bu stratejiye “bulletproof @font-face<\/code>” ad\u0131 verilir ve taray\u0131c\u0131lar\u0131n en uygun format\u0131 se\u00e7mesini sa\u011flar:<\/p>\n
@font-face {\n  font-family: 'MyCustomFont';\n  src: local('My Custom Font'),\n       url('\/fonts\/MyCustomFont-Regular.woff2') format('woff2'), \/ Modern taray\u0131c\u0131lar, en iyi s\u0131k\u0131\u015ft\u0131rma <\/em>\/\n       url('\/fonts\/MyCustomFont-Regular.woff') format('woff'),   \/ Geni\u015f taray\u0131c\u0131 deste\u011fi <\/em>\/\n       url('\/fonts\/MyCustomFont-Regular.ttf') format('truetype'), \/ Eski taray\u0131c\u0131lar i\u00e7in yedek <\/em>\/\n       url('\/fonts\/MyCustomFont-Regular.eot?#iefix') format('embedded-opentype'); \/ IE9 \u00f6ncesi <\/em>\/\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap;\n}<\/code><\/pre>\n
Bu s\u0131ralamada:
\n1.  local()<\/code>: Kullan\u0131c\u0131n\u0131n sisteminde font varsa, indirme yapmaz.
\n2.  woff2<\/code>: En yeni ve verimli format, modern taray\u0131c\u0131lar i\u00e7in.
\n3.  woff<\/code>: Daha eski ama yayg\u0131n taray\u0131c\u0131lar i\u00e7in.
\n4.  ttf<\/code> veya otf<\/code>: Daha da eski taray\u0131c\u0131lar i\u00e7in genel bir yedek.
\n5.  eot<\/code>: \u00d6zellikle eski Internet Explorer s\u00fcr\u00fcmleri i\u00e7in. ?#iefix<\/code> k\u0131sm\u0131, IE’nin belirli bir hatas\u0131n\u0131 a\u015fmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Taray\u0131c\u0131, src<\/code> listesini yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru okur ve destekledi\u011fi ilk format\u0131 indirir. Bu sayede, her zaman en uygun format\u0131n kullan\u0131lmas\u0131n\u0131 sa\u011flam\u0131\u015f olursunuz.<\/p>\n
Font Performans\u0131 ve Kullan\u0131c\u0131 Deneyimi<\/h3>\n
\u00d6zel fontlar, tasar\u0131m a\u00e7\u0131s\u0131ndan zenginlik katarken, sayfa y\u00fckleme s\u00fcresi ve g\u00f6rsel kararl\u0131l\u0131k a\u00e7\u0131s\u0131ndan da zorluklar yaratabilir. Kullan\u0131c\u0131lar, fontlar\u0131n y\u00fcklenmesini beklerken metnin nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcne dair farkl\u0131 deneyimler ya\u015fayabilirler. Bu deneyimler genellikle \u00fc\u00e7 ana kategoriye ayr\u0131l\u0131r:<\/p>\n
*   FOUC (Flash of Unstyled Content)<\/strong>: Bu, nadiren g\u00f6r\u00fclen bir durumdur ve genellikle fontlar\u0131n CSS’ten \u00f6nce y\u00fcklenmesi gerekti\u011finde ortaya \u00e7\u0131kar. Sayfa ilk y\u00fcklendi\u011finde metin, taray\u0131c\u0131n\u0131n varsay\u0131lan stilize edilmemi\u015f fontuyla g\u00f6r\u00fcn\u00fcr, ard\u0131ndan CSS y\u00fcklendik\u00e7e aniden \u00f6zel fonta ge\u00e7er. Bu, g\u00f6rsel bir s\u0131\u00e7ramaya neden olabilir.
\n*   FOUT (Flash of Unstyled Text)<\/strong>: Bu, \u00f6zel font y\u00fcklenirken metnin \u00f6nce bir yedek (sistem) fontuyla g\u00f6sterilmesi ve \u00f6zel font y\u00fcklendikten sonra bu fonta ge\u00e7i\u015f yap\u0131lmas\u0131 durumudur. Metin her zaman g\u00f6r\u00fcn\u00fcr olsa da, font de\u011fi\u015fimi g\u00f6rsel bir kaymaya neden olabilir. \u00c7o\u011fu kullan\u0131c\u0131 i\u00e7in FOIT’ten daha kabul edilebilir bir durumdur, \u00e7\u00fcnk\u00fc i\u00e7erik hemen okunabilir durumdad\u0131r.
\n*   FOIT (Flash of Invisible Text)<\/strong>: Bu, \u00f6zel font y\u00fcklenene kadar metnin tamamen g\u00f6r\u00fcnmez kalmas\u0131 durumudur. Font dosyas\u0131 indirilip haz\u0131r oldu\u011funda metin aniden belirir. Bu durum, \u00f6zellikle yava\u015f internet ba\u011flant\u0131lar\u0131nda veya b\u00fcy\u00fck font dosyalar\u0131nda kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir, \u00e7\u00fcnk\u00fc kullan\u0131c\u0131 bir s\u00fcre bo\u015f bir ekranla kar\u015f\u0131la\u015fabilir.<\/p>\n
Bu sorunlar\u0131 y\u00f6netmek ve kullan\u0131c\u0131 deneyimini optimize etmek i\u00e7in CSS’in font-display<\/code> \u00f6zelli\u011fi geli\u015ftirilmi\u015ftir.<\/p>\n
font-display \u00d6zelli\u011fi ile Font Y\u00fckleme Davran\u0131\u015f\u0131n\u0131 Kontrol Etme<\/h3>\n
font-display<\/code> \u00f6zelli\u011fi, @font-face<\/code> kural\u0131na eklenerek, taray\u0131c\u0131n\u0131n \u00f6zel font y\u00fcklenirken metni nas\u0131l i\u015fleyece\u011fini belirlemenizi sa\u011flar. Bu \u00f6zellik, FOIT ve FOUT gibi sorunlar\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar.<\/p>\n
font-display<\/code> \u00f6zelli\u011fi a\u015fa\u011f\u0131daki de\u011ferleri alabilir:<\/p>\n
*   auto<\/code><\/strong>: Taray\u0131c\u0131n\u0131n varsay\u0131lan font g\u00f6r\u00fcnt\u00fcleme stratejisini kullan\u0131r. \u00c7o\u011fu taray\u0131c\u0131da bu, block<\/code> de\u011ferine benzer bir davran\u0131\u015f sergiler.
\n*   block<\/code><\/strong>: Bu de\u011fer, k\u0131sa bir “blok periyodu” ve ard\u0131ndan bir “takas periyodu” tan\u0131mlar.
\n    *   Blok Periyodu (Block Period)<\/strong>: Yakla\u015f\u0131k 3 saniye s\u00fcrer. Bu s\u00fcre boyunca font y\u00fcklenmezse, metin g\u00f6r\u00fcnmez (FOIT) kal\u0131r.
\n    *   Takas Periyodu (Swap Period)<\/strong>: Blok periyodu sona erdi\u011finde veya font y\u00fcklendi\u011finde ba\u015flar. E\u011fer font blok periyodu i\u00e7inde y\u00fcklenmezse ve takas periyodu ba\u015flarsa, taray\u0131c\u0131 yedek fontu kullan\u0131r. Font y\u00fcklendi\u011finde, yedek font \u00f6zel fontla de\u011fi\u015ftirilir.
\n    Bu, FOIT benzeri bir deneyim sunar. Metin bir s\u00fcre g\u00f6r\u00fcnmez kalabilir.
\n*   swap<\/code><\/strong>: Bu de\u011fer, “blok periyodu”nu s\u0131f\u0131r yapar.
\n    *   Blok Periyodu<\/strong>: S\u0131f\u0131r saniyedir. Metin hemen yedek fontla g\u00f6sterilir.
\n    *   Takas Periyodu<\/strong>: \u00c7ok uzundur (genellikle s\u00fcresiz). Font y\u00fcklendi\u011finde, yedek font \u00f6zel fontla de\u011fi\u015ftirilir.
\n    Bu, FOUT benzeri bir deneyim sunar. Metin her zaman g\u00f6r\u00fcn\u00fcrd\u00fcr, ancak font de\u011fi\u015fimi ya\u015fan\u0131r. \u00c7o\u011fu web sitesi i\u00e7in \u00f6nerilen de\u011ferdir, \u00e7\u00fcnk\u00fc i\u00e7erik hemen okunabilir olur.
\n*   fallback<\/code><\/strong>: Bu de\u011fer, \u00e7ok k\u0131sa bir “blok periyodu” ve k\u0131sa bir “takas periyodu” tan\u0131mlar.
\n    *   Blok Periyodu<\/strong>: Yakla\u015f\u0131k 100 milisaniye (\u00e7ok k\u0131sa). Bu s\u00fcre boyunca font y\u00fcklenmezse, metin g\u00f6r\u00fcnmez (FOIT) kal\u0131r.
\n    *   Takas Periyodu<\/strong>: Yakla\u015f\u0131k 3 saniye s\u00fcrer. E\u011fer font bu 3 saniye i\u00e7inde y\u00fcklenirse, yedek font \u00f6zel fontla de\u011fi\u015ftirilir. E\u011fer font bu 3 saniye i\u00e7inde de y\u00fcklenmezse, taray\u0131c\u0131 yedek fontu kal\u0131c\u0131 olarak kullan\u0131r ve \u00f6zel font y\u00fcklenmi\u015f olsa bile art\u0131k onu kullanmaz.
\n    Bu, fontun \u00e7ok h\u0131zl\u0131 y\u00fcklenmesi bekleniyorsa veya fontun y\u00fcklenmemesi durumunda yedek fontun kal\u0131c\u0131 olmas\u0131n\u0131 istiyorsan\u0131z kullan\u0131\u015fl\u0131d\u0131r.
\n*   optional<\/code><\/strong>: Bu de\u011fer, s\u0131f\u0131r “blok periyodu” ve s\u0131f\u0131r “takas periyodu” tan\u0131mlar.
\n    *   Blok Periyodu<\/strong>: S\u0131f\u0131r saniyedir. Metin hemen yedek fontla g\u00f6sterilir.
\n    *   Takas Periyodu<\/strong>: S\u0131f\u0131r saniyedir. Font arka planda y\u00fcklenmeye devam eder. E\u011fer font \u00e7ok h\u0131zl\u0131 bir \u015fekilde (genellikle birka\u00e7 y\u00fcz milisaniye i\u00e7inde) y\u00fcklenirse, taray\u0131c\u0131 onu kullan\u0131r. Aksi takdirde, taray\u0131c\u0131 yedek fontu kal\u0131c\u0131 olarak kullan\u0131r ve \u00f6zel fontu bir sonraki sayfa y\u00fcklemesinde (\u00f6nbellekten) kullanmay\u0131 d\u00fc\u015f\u00fcnebilir.
\n    Bu de\u011fer, fontun kritik olmad\u0131\u011f\u0131 ve a\u011f durumuna g\u00f6re esneklik sa\u011flamak istedi\u011finiz durumlarda faydal\u0131d\u0131r. \u00d6zellikle yava\u015f a\u011f ba\u011flant\u0131lar\u0131nda, \u00f6zel fontun indirilmesini tamamen atlayarak performans\u0131 \u00f6nceliklendirir.<\/p>\n
Hangi de\u011feri ne zaman kullanmal\u0131?<\/h4>\n
*   font-display: swap;<\/code><\/strong>: En yayg\u0131n ve genellikle en iyi se\u00e7enektir. Kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fi m\u00fcmk\u00fcn olan en k\u0131sa s\u00fcrede okumas\u0131n\u0131 sa\u011flar. Font de\u011fi\u015fimi fark edilebilir olsa da, i\u00e7erik g\u00f6r\u00fcnmez kalmaz. Marka kimli\u011fi i\u00e7in \u00f6zel fontlar\u0131n mutlaka g\u00f6sterilmesi gerekiyorsa idealdir.
\n*   font-display: block;<\/code><\/strong>: E\u011fer markan\u0131z\u0131n tipografisi o kadar kritikse ki, font y\u00fcklenmeden metnin g\u00f6sterilmesini istemiyorsan\u0131z kullanabilirsiniz. Ancak bu, FOIT riskini beraberinde getirir ve yava\u015f ba\u011flant\u0131larda k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7abilir.
\n*   font-display: fallback;<\/code><\/strong>: Fontun h\u0131zl\u0131 y\u00fcklenece\u011finden eminseniz veya belirli bir s\u00fcre sonra yedek fonta kal\u0131c\u0131 olarak ge\u00e7i\u015f yap\u0131lmas\u0131n\u0131 tercih ediyorsan\u0131z kullan\u0131\u015fl\u0131d\u0131r.
\n*   font-display: optional;<\/code><\/strong>: Performans\u0131n tipografik esteti\u011fin \u00f6n\u00fcne ge\u00e7ti\u011fi durumlarda tercih edilir. \u00d6zellikle yava\u015f a\u011flarda veya d\u00fc\u015f\u00fck \u00f6ncelikli fontlar i\u00e7in kullan\u0131c\u0131 deneyimini iyile\u015ftirebilir.<\/p>\n
\u00d6rnek kullan\u0131m:<\/p>\n
@font-face {\n  font-family: 'MyCustomFont';\n  src: url('\/fonts\/MyCustomFont-Regular.woff2') format('woff2');\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap; \/ Bu kural\u0131 ekledik <\/em>\/\n}<\/code><\/pre>\n
Font Y\u00fcklemesini Daha da Optimize Etme<\/h3>\n
@font-face<\/code> ve font-display<\/code> g\u00fc\u00e7l\u00fc ara\u00e7lar olsa da, font performans\u0131n\u0131 daha da ileriye ta\u015f\u0131mak i\u00e7in ek optimizasyon teknikleri mevcuttur.<\/p>\n
Alt K\u00fcmeleme (Subsetting)<\/h4>\n
Bir font dosyas\u0131 genellikle d\u00fcnya genelindeki t\u00fcm karakterleri, sembolleri ve glifleri i\u00e7erir. Ancak \u00e7o\u011fu web sitesi, bu karakterlerin yaln\u0131zca k\u00fc\u00e7\u00fck bir alt k\u00fcmesini kullan\u0131r (\u00f6rne\u011fin, sadece Latin alfabesi ve birka\u00e7 \u00f6zel karakter). Alt k\u00fcmeleme, font dosyas\u0131ndan kullan\u0131lmayan karakterleri \u00e7\u0131kararak dosya boyutunu k\u00fc\u00e7\u00fcltme i\u015flemidir.<\/p>\n
*   Dinamik Alt K\u00fcmeleme<\/strong>: Google Fonts gibi servisler, yaln\u0131zca belirli bir sayfada kullan\u0131lan karakterleri dinamik olarak alt k\u00fcmeleyebilir.
\n*   Manuel Alt K\u00fcmeleme<\/strong>: FontForge veya Font Squirrel’s Webfont Generator gibi ara\u00e7larla kendi font dosyalar\u0131n\u0131z\u0131 alt k\u00fcmeleyebilirsiniz. \u00d6rne\u011fin, sadece T\u00fcrk\u00e7e karakterleri (U+000-5FF<\/code> ve U+100-17F<\/code> gibi) i\u00e7eren bir alt k\u00fcme olu\u015fturabilirsiniz. @font-face<\/code> i\u00e7indeki unicode-range<\/code> \u00f6zelli\u011fi, bu alt k\u00fcmelenmi\u015f fontlar\u0131n ne zaman y\u00fcklenece\u011fini taray\u0131c\u0131ya bildirir.<\/p>\n
De\u011fi\u015fken Fontlar (Variable Fonts)<\/h4>\n
De\u011fi\u015fken fontlar, tek bir font dosyas\u0131 i\u00e7inde birden fazla a\u011f\u0131rl\u0131k, stil, geni\u015flik ve di\u011fer tipografik varyasyonlar\u0131 bar\u0131nd\u0131rabilen yenilik\u00e7i bir OpenType format\u0131d\u0131r. Geleneksel olarak, her font a\u011f\u0131rl\u0131\u011f\u0131 (regular, bold, light) ve stili (italic) i\u00e7in ayr\u0131 bir font dosyas\u0131 indirmeniz gerekirken, de\u011fi\u015fken fontlar tek bir (ancak biraz daha b\u00fcy\u00fck) dosya ile t\u00fcm bu varyasyonlar\u0131 sunar.<\/p>\n
*   Avantajlar\u0131<\/strong>: Daha az HTTP iste\u011fi, daha esnek tipografik kontrol, potansiyel olarak daha k\u00fc\u00e7\u00fck toplam font boyutu (birden fazla varyant kullan\u0131l\u0131yorsa).
\n*   Kullan\u0131m<\/strong>: @font-face<\/code> kural\u0131nda font-weight<\/code>, font-stretch<\/code> gibi \u00f6zellikleri bir aral\u0131k olarak belirtilebilir (\u00f6rn. font-weight: 100 900;<\/code>).<\/p>\n
Font Y\u00fckleme API’leri (JavaScript)<\/h4>\n
Taray\u0131c\u0131n\u0131n yerle\u015fik Font Loading API<\/code>‘si (document.fonts<\/code>), JavaScript arac\u0131l\u0131\u011f\u0131yla font y\u00fcklemesini daha hassas bir \u015fekilde kontrol etmenizi sa\u011flar. Bu API ile fontlar\u0131n ne zaman y\u00fcklendi\u011fini alg\u0131layabilir ve buna g\u00f6re sayfa d\u00fczenini veya animasyonlar\u0131 tetikleyebilirsiniz.<\/p>\n
\/\/ Font y\u00fcklemesinin tamamlanmas\u0131n\u0131 bekleyin\ndocument.fonts.ready.then(() => {\n  console.log('T\u00fcm fontlar y\u00fcklendi!');\n  \/\/ Fontlar y\u00fcklendikten sonra yap\u0131lacak i\u015flemler\n  document.body.classList.add('fonts-loaded');\n});\n\n\/\/ Belirli bir fontun y\u00fcklenmesini bekleyin\nconst myFont = new FontFace('MyCustomFont', 'url(\/fonts\/MyCustomFont-Regular.woff2)');\ndocument.fonts.add(myFont);\nmyFont.load().then(() => {\n  console.log('MyCustomFont y\u00fcklendi!');\n  document.body.classList.add('my-custom-font-loaded');\n});<\/code><\/pre>\n
Bu, font y\u00fcklemesi tamamland\u0131\u011f\u0131nda belirli bir s\u0131n\u0131f ekleyerek, CSS ile ge\u00e7i\u015f efektleri veya animasyonlar uygulaman\u0131za olanak tan\u0131r ve FOUT\/FOIT etkisini daha yumu\u015fak hale getirebilir.<\/p>\n
preload<\/code> Kullan\u0131m\u0131<\/h4>\n
<\/code> etiketi, taray\u0131c\u0131ya belirli bir kayna\u011f\u0131n (bu durumda font dosyalar\u0131) mevcut sayfada y\u00fcksek \u00f6ncelikli olarak ihtiya\u00e7 duyulaca\u011f\u0131n\u0131 ve m\u00fcmk\u00fcn olan en k\u0131sa s\u00fcrede indirilmeye ba\u015flanmas\u0131 gerekti\u011fini bildirir. Bu, taray\u0131c\u0131n\u0131n font dosyalar\u0131n\u0131 CSS ayr\u0131\u015ft\u0131rmas\u0131n\u0131 beklemeden daha erken indirmeye ba\u015flamas\u0131na olanak tan\u0131r.<\/p>\n
\n  \n  \n  \n<\/head><\/code><\/pre>\n
*   as=\"font\"<\/code>: Kayna\u011f\u0131n bir font oldu\u011funu belirtir.
\n*   type=\"font\/woff2\"<\/code>: Fontun MIME tipini belirtir.
\n*   crossorigin<\/code>: Font dosyalar\u0131 farkl\u0131 bir kaynaktan (\u00f6rne\u011fin CDN) y\u00fckleniyorsa zorunludur. Ayn\u0131 kaynaktan y\u00fckleniyorsa bile g\u00fcvenlik nedeniyle eklenmesi iyi bir uygulamad\u0131r.<\/p>\n
preload<\/code> kullan\u0131rken dikkatli olmak gerekir; \u00e7ok fazla kaynak \u00f6n y\u00fcklemek, di\u011fer kritik kaynaklar\u0131n y\u00fcklenmesini geciktirebilir. Yaln\u0131zca sayfan\u0131n ilk g\u00f6r\u00fcn\u00fcm\u00fcnde (above-the-fold content) kullan\u0131lan fontlar i\u00e7in kullan\u0131lmal\u0131d\u0131r.<\/p>\n
CSS font-feature-settings<\/code> ve font-variant<\/code><\/h4>\n
Bu CSS \u00f6zellikleri, OpenType fontlar\u0131nda bulunan geli\u015fmi\u015f tipografik \u00f6zelliklere eri\u015fim sa\u011flar (ligat\u00fcrler, say\u0131 stilleri, k\u00fc\u00e7\u00fck b\u00fcy\u00fck harfler vb.). Bu \u00f6zellikler, fontun g\u00f6rsel zenginli\u011fini art\u0131rabilir ve daha profesyonel bir tipografi sunabilir.<\/p>\n
p {\n  font-feature-settings: \"liga\" 1, \"dlig\" 1; \/ Ligat\u00fcrleri etkinle\u015ftir <\/em>\/\n  font-variant: small-caps; \/ K\u00fc\u00e7\u00fck b\u00fcy\u00fck harfler <\/em>\/\n}<\/code><\/pre>\n
CDN Kullan\u0131m\u0131<\/h4>\n
Font dosyalar\u0131n\u0131 bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden sunmak, fontlar\u0131n kullan\u0131c\u0131lara co\u011frafi olarak daha yak\u0131n sunuculardan indirilmesini sa\u011flayarak y\u00fckleme s\u00fcrelerini azaltabilir. Google Fonts gibi servisler zaten CDN kullan\u0131r. Kendi bar\u0131nd\u0131rd\u0131\u011f\u0131n\u0131z fontlar i\u00e7in de bir CDN entegrasyonu d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n
Eri\u015filebilirlik ve Yedek Fontlar<\/h3>\n
\u00d6zel fontlar ne kadar g\u00fczel olursa olsun, her zaman yedek bir plan\u0131n\u0131z olmal\u0131d\u0131r. Font y\u00fcklemesi ba\u015far\u0131s\u0131z olabilir, kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131 fontu desteklemeyebilir veya a\u011f ba\u011flant\u0131s\u0131 \u00e7ok yava\u015f olabilir. Bu gibi durumlarda, metnin okunabilirli\u011fini ve eri\u015filebilirli\u011fini sa\u011flamak i\u00e7in iyi se\u00e7ilmi\u015f yedek fontlara sahip olmak kritik \u00f6neme sahiptir.<\/p>\n
*   Yedek Font Se\u00e7imi<\/strong>: Yedek fontlar, \u00f6zel fontunuza g\u00f6rsel olarak en yak\u0131n sistem fontlar\u0131 veya web g\u00fcvenli fontlar olmal\u0131d\u0131r. Bu, font de\u011fi\u015fimi s\u0131ras\u0131nda g\u00f6rsel s\u0131\u00e7ramay\u0131 en aza indirmeye yard\u0131mc\u0131 olur.
\n*   Font Y\u0131\u011f\u0131nlar\u0131 (Font Stacks)<\/strong>: CSS’te font-family<\/code> \u00f6zelli\u011fini tan\u0131mlarken, birden fazla fontu virg\u00fclle ay\u0131rarak bir “font y\u0131\u011f\u0131n\u0131” olu\u015fturabilirsiniz. Taray\u0131c\u0131, listedeki ilk fontu bulmaya \u00e7al\u0131\u015f\u0131r; e\u011fer bulamazsa veya y\u00fckleyemezse, bir sonraki fonta ge\u00e7er. En sona her zaman bir jenerik font ailesi (serif, sans-serif, monospace, cursive, fantasy) eklemek iyi bir uygulamad\u0131r.<\/p>\n
body {\n  font-family: 'MyCustomFont', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}<\/code><\/pre>\n
Bu \u00f6rnekte:
\n1.  Taray\u0131c\u0131 \u00f6nce MyCustomFont<\/code>‘u y\u00fcklemeye \u00e7al\u0131\u015f\u0131r.
\n2.  E\u011fer MyCustomFont<\/code> y\u00fcklenemezse veya bulunamazsa, Helvetica Neue<\/code>‘yi arar.
\n3.  Helvetica Neue<\/code> bulunamazsa, Helvetica<\/code>‘y\u0131 dener.
\n4.  Helvetica<\/code> bulunamazsa, Arial<\/code>‘\u0131 dener.
\n5.  Son olarak, listedeki hi\u00e7bir font bulunamazsa, taray\u0131c\u0131 kullan\u0131c\u0131n\u0131n sistemindeki varsay\u0131lan sans-serif<\/code> fontunu kullan\u0131r.<\/p>\n
Bu yakla\u015f\u0131m, \u00f6zel fontlar\u0131n y\u00fcklenmesinde bir sorun ya\u015fand\u0131\u011f\u0131nda bile i\u00e7eri\u011fin her zaman okunabilir kalmas\u0131n\u0131 garanti eder. Eri\u015filebilirlik a\u00e7\u0131s\u0131ndan, metinlerin asla g\u00f6r\u00fcnmez kalmamas\u0131 veya okunaks\u0131z hale gelmemesi esast\u0131r.<\/p>\n
Sonu\u00e7<\/h3>\n
\u00d6zel fontlar, bir web sitesinin g\u00f6rsel kimli\u011fini ve kullan\u0131c\u0131 deneyimini zenginle\u015ftiren vazge\u00e7ilmez unsurlard\u0131r. Ancak bu zenginli\u011fi, performans ve eri\u015filebilirlikten \u00f6d\u00fcn vermeden sunmak, dikkatli bir planlama ve do\u011fru tekniklerin uygulanmas\u0131n\u0131 gerektirir. CSS’in @font-face<\/code> kural\u0131, \u00f6zel fontlar\u0131 tan\u0131mlaman\u0131n temelini olu\u015ftururken, font-display<\/code> \u00f6zelli\u011fi font y\u00fckleme davran\u0131\u015f\u0131n\u0131 optimize ederek FOUT ve FOIT gibi sorunlar\u0131 y\u00f6netmemizi sa\u011flar.<\/p>\n
Do\u011fru font formatlar\u0131n\u0131 se\u00e7mek, “bulletproof” @font-face<\/code> s\u00f6zdizimini kullanmak, fontlar\u0131 alt k\u00fcmelemek, preload<\/code> ile \u00f6n y\u00fcklemek ve de\u011fi\u015fken fontlar\u0131 de\u011ferlendirmek gibi ek optimizasyon teknikleri, web sitelerinizin daha h\u0131zl\u0131 y\u00fcklenmesine ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunmas\u0131na yard\u0131mc\u0131 olacakt\u0131r. Unutulmamal\u0131d\u0131r ki, her zaman bir yedek font stratejisi belirlemek, font y\u00fcklemesi ba\u015far\u0131s\u0131z olsa bile i\u00e7eri\u011fin eri\u015filebilir ve okunabilir kalmas\u0131n\u0131 garantiler.<\/p>\n
Sonu\u00e7 olarak, @font-face<\/code> ve font-display<\/code> \u00f6zelliklerini etkin bir \u015fekilde kullanarak, hem estetik a\u00e7\u0131dan \u00e7ekici hem de performans a\u00e7\u0131s\u0131ndan optimize edilmi\u015f web siteleri in\u015fa edebiliriz. Bu teknikleri bir araya getirmek, modern web geli\u015ftiricilerinin ara\u00e7 kutusunda olmazsa olmaz bir beceridir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS’te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon\nGiri\u015f: Web Tasar\u0131m\u0131nda Fontlar\u0131n Rol\u00fc ve Kar\u015f\u0131la\u015f\u0131lan Zorlu","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-36916","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon\" \/>\n<meta property=\"og:description\" content=\"CSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon Giri\u015f: Web Tasar\u0131m\u0131nda Fontlar\u0131n Rol\u00fc ve Kar\u015f\u0131la\u015f\u0131lan Zorlu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-24T19:40:44+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS’te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon\",\"datePublished\":\"2025-12-24T19:40:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/\"},\"wordCount\":3178,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/\",\"name\":\"CSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-24T19:40:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS’te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon","og_description":"CSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon Giri\u015f: Web Tasar\u0131m\u0131nda Fontlar\u0131n Rol\u00fc ve Kar\u015f\u0131la\u015f\u0131lan Zorlu","og_url":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-24T19:40:44+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"18 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS’te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon","datePublished":"2025-12-24T19:40:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/"},"wordCount":3178,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/","url":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/","name":"CSS'te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-24T19:40:44+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/csste-ozel-fontlari-font-face-ve-font-display-ile-tanimlama-ve-optimizasyon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS’te \u00d6zel Fontlar\u0131 @font-face ve font-display ile Tan\u0131mlama ve Optimizasyon"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=36916"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36916\/revisions"}],"predecessor-version":[{"id":36917,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36916\/revisions\/36917"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}