Üçüncü taraf yazı tipleri

Yazı tiplerini hızlı bir şekilde teslim etmek son derece önemlidir: Daha hızlı yazı tipi teslimi, yalnızca metnin kullanıcıya daha erken gösterilmesi anlamına gelmez, aynı zamanda bir yazı tipinin düzen kaymasına neden olup olmaması üzerinde de büyük bir etkiye sahiptir. Bir yazı tipi ihtiyaç duyulmadan yayınlanamazsa genellikle yazı tipi değiştirildiğinde bir düzen kayması olur. Bu düzen kaymasının boyutu, yedek yazı tipinin web yazı tipiyle ne kadar yakından eşleştiğine bağlı olarak değişebilir. Bu olguyu çalışırken görmek için demoyu izleyin ve hızlı bağlantı ile yavaş bağlantıda gerçekleşen düzen kaymalarını karşılaştırın.

Aşağıdaki örnekte, bir üçüncü taraf yazı tipini mümkün olduğunca hızlı bir şekilde yüklemek için iki performans tekniği birleştirilmektedir: satır içi yazı tipi bildirimlerinin kullanımı ve preconnect kaynak ipuçlarının kullanımı. Bu kod snippet'i, Google Fonts'tan yazı tiplerinin nasıl yükleneceğini gösterse de bu teknikler, diğer üçüncü taraf yazı tipi sağlayıcıları için de geçerlidir.

  • Satır içi yazı tipi bildirimleri: font-family bildirimlerini ana dokümanda satır içi yapmak, bu bilgileri harici bir stil sayfasına eklemek yerine, tarayıcının ayrı bir stil sayfası dosyasının indirilmesini beklemek zorunda kalmadan sayfada hangi yazı tipi dosyalarının kullanılacağını belirlemesine olanak tanır. Genellikle tarayıcılar yazı tipi dosyalarını sayfada kullanıldıklarını anlamadıkları sürece indirmeyeceğinden bu önemlidir. Çoğu durumda, satır içi yazı tipi bildirimleri yazı tipini yüklemek için preload kullanmak yerine tercih edilir.

  • Önceden bağlanma: Google Fonts'u yüklemek için önerilen yol, preconnect kaynak ipuçlarıyla birlikte <link> etiketini kullanmaktır. preconnect kaynağı ipucu, üçüncü taraf kaynakla erken bir bağlantı kurar. Aşağıdaki kod snippet'inde bulunan ilk kaynak ipucu, yazı tipi stil sayfasının indirilmesi için bir bağlantı; ikinci kaynak ipucu ise yazı tipi dosyalarının indirilmesi için bir bağlantı oluşturur.

Örnek:

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>