Bir Profesyonel Gibi Squarespace'e Özel Yazı Tipleri Nasıl Eklenir

Squarespace'e özel yazı tipleri eklemek ister misiniz?

Bir Squarespace kullanıcısıysanız, platformun bazı sağlam yazı tipi seçenekleriyle geldiğini zaten biliyorsunuzdur. Ancak Squarespace web sitelerine yazı tipi eklemek için birçok neden var!

Genellikle bir marka yazı tipidir, hatta sizin yapmış olduğunuz ısmarlama bir yazı tipidir.

Belki de daha çok web sitenizdeki öğeler için oluşturmak istediğiniz belirli bir görünümle ilgilidir.

Sebep ne olursa olsun, Squarespace'e özel yazı tipleri eklemek kolaydır - sadece bu işlemi takip edin!

Squarespace web sitenize özel bir yazı tipi nasıl eklenir

Seçtiğiniz bir yazı tipini Squarespace web sitenize eklemek oldukça basittir, ancak eklenecek biraz CSS var.

Başlamadan önce bunu yapmakta sorun olmadığından emin olun veya olan birini alın.

Adım 1. Yazı tipinizi seçin

Kullanmak istediğiniz yazı tipini zaten seçtiyseniz sonraki adıma geçin. Aksi takdirde, blogunuzda yasal olarak kullanabileceğiniz bir yazı tipi seçtiğinizden emin olun.

Creative Market gibi ücretsiz ve ücretli yazı tiplerini bulabileceğiniz birçok yer var. Ancak web sitenize bir lisans eklemeden önce lisanslamayı kontrol edin.

Adım 2. Web yazı tipi dosyalarınızı hazırlayın

Web sitesine bir yazı tipi eklemek için üç yazı tipi dosya formatına ihtiyacınız olacak:

1. .ttf veya .otf
2. .woff
3. .woff2

Bazen bir web yazı tipi dosya türünüz olabilir ve varsa bu adımı atlayın. Sadece bunu kullanabilirsin.

Aksi takdirde, üç dosya türünü eklemeye hazır bulundurun.

3. Adım. Yazı tipi dosyalarınızı Squarespace'e yükleyin

Tasarım > Özel CSS > Özel Dosyaları Yönet'e gidin

Burada yükleme düğmesi aracılığıyla yazı tipleri ekleyeceksiniz.

Bunu üç dosyanın tümü için veya sahip olduğunuz buysa web yazı tipi dosyası için tekrarlayın.

Adım 4. Özel yazı tipinizi Squarespace'de adlandırın

Yazı tipi yüklendikten sonra, Squarespace'e CSS Düzenleyici ile nerede ve ne olduğunu söylemeniz gerekir.

Aşağıdaki kodu kullanın:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Bunu alın ve yazı tipiniz için ilgili bilgileri ekleyin:

• Yazı tipi adı: bunu dosya adına veya hatırlayacağınız bir şeye göre yazı tipinizin adıyla değiştirin.
• Yazı Tipi URL'leri: bunu, az önce yüklediğiniz yazı tiplerinin URL'leriyle değiştirin. URL'yi yükleme alanınızdan alın (bir resim URL'si için yaptığınız gibi) ve bunu yerine ekleyin.

Adım 5. Özel yazı tipinin nerede ve nasıl kullanılması gerektiğini tanımlayın

Son olarak, web sitenizdeki farklı yazı tiplerini nerede kullanacağınızı Squarespace'e söylemeniz yeterlidir.

Bu, başlıklar veya site başlığı, düğmeler ve hatta haber bülteni bloğu gibi yerlerde olabilir.

Yazı tipinizi ortak yerlerde nasıl kullanırsınız?

Yazı tipinizi yükledikten sonra, nerede kullanılacağı hakkında Squarespace'e özel bilgiler vermeye başlayabilirsiniz.

İşte birkaç popüler örnek ve nasıl yapılacağı.

Site Başlığı Yazı Tipleri Nasıl Değiştirilir

Site başlığı, gezinme çubuğunun en üstündeki alandır.

Burada çok sayıda bağlantınız, bir metin logonuz ve belki bir duyurunuz olabilir.

Tüm bunların yazı tipi, aşağıdaki CSS parçacığı kullanılarak değiştirilebilir:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

YOURNAME'i yazı tipinizin adıyla değiştirmeyi unutmayın.

Düğme Yazı Tipleri Nasıl Değiştirilir

Özel yazı tiplerini kullanmak için bir başka popüler yer, web sitenizin düğmeleridir.

Üç düğme bloğu vardır: Küçük, Orta ve Büyük. Aşağıdaki kodla birini veya hepsini değiştirebilirsiniz:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

YOURNAME'i yazı tipinizin adıyla değiştirmeyi unutmayın.

Pinterest'e sabitleyin, böylece daha sonra geri dönebilirsiniz!

(Grafikten sonra daha fazla özel yazı tipi ipuçları ve sorun giderme).

Bülten Blok Yazı Tipleri Nasıl Değiştirilir

Bülten bloğu, insanların e-posta listenize kaydolmasına olanak tanır. Birçok kişi bunun için farklı eklentiler kullanır.

Ancak bloğu Squarespace içinde kullanırsanız, aşağıdaki kod özel bir yazı tipi eklemenize izin verir.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

YOURNAME'i yazı tipinizin adıyla değiştirmeyi unutmayın.

Blog Yazısı Yazı Tipleri Nasıl Değiştirilir

Bir yazı tipiyle yapılacak en popüler şeylerden biri, onu blog yazıları için kullanmaktır.

Bunu yaparken makale sayfalarındaki sayfa başlığını, açıklamaları ve yazı başlıklarını dikkate almanız gerekir.

Muhtemelen hepsinin aynı olmasını isteyeceksiniz.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

YOURNAME'i yazı tipinizin adıyla değiştirmeyi unutmayın.

Alıntı Bloğu Yazı Tipleri Nasıl Değiştirilir

Son örnek, Alıntı Bloğu'nu farklı bir yazı tipiyle değiştirmektir.

Bu, gönderilerdeki alıntılar için değil, aynı zamanda müşteri referansları veya incelemeleri gibi şeyler için de kullanılır.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

YOURNAME'i yazı tipinizin adıyla değiştirmeyi unutmayın.

Ayrıca Squarespace resim boyutu rehberimi de beğenebilirsiniz.

Özel yazı tipi sorunları

Yazı tipi eklemek, biraz CSS'ye hakim olduğunuzda kolay bir iştir. Ancak bildirilen birkaç yaygın hata vardır.

Site stillerinde "Desteklenmeyen Yazı Tipleri" mesajı

Bazen sitenizde 'desteklenmeyen yazı tipi' mesajı görebilirsiniz. Bu, bir Adobe Font kullanıldığında ve ardından Adobe onu kullanımdan kaldırdığında olur.

Çoğu zaman, Squarespace onu en yakın alternatifle değiştirir. Ancak değilse, değiştirmek için başka bir yazı tipi yüklemeniz gerekebilir.

Giriş yaptığımda yazı tipim farklı görünüyor

Bazen insanlar giriş yaptıklarında ve canlı siteyi görüntülerken yazı tiplerinin farklı göründüğünü fark ederler. Bunun nedeni genellikle yazı tipi okuyucuları ve siteyi nasıl görüntüledikleridir.

Bunu fark ederseniz, Squarespace desteği ile iletişime geçin ve nelerin ayarlanması gerektiğini görmek için ayarlara bakabilirler.

Yazı tipimi belirli bir boyuta ayarlayamıyorum

Bir yazı tipi için belirli bir boyut ayarlamayla ilgili sorunlar genellikle web sitenizin arka ucuyla ilgilidir. Kullanmakta olduğunuz Squarespace sürümünden kaynaklanıyor olabilir.

Bu nedenle, neyin yanlış olabileceği konusunda yardımlarını almak için desteğe ulaşın.

Özel yazı tiplerinizi Squarespace'e ekleyin

Bir CSS dokunuşuyla, Squarespace'e hızlı bir şekilde özel yazı tipi dosyaları ekleyebilirsiniz.

Bunları biraz kod ile farklı yerlerde kullanabilir ve boyuttan harf aralığına kadar her şeyi ayarlayabilirsiniz.

Stil Düzenleyici, web sitenizi yerleşik yazı tipi seçeneklerinin ötesinde özelleştirmeyi kolaylaştırdı.

Peki, web sitenizin daha da akıllı görünmesini sağlamak için özel yazı tiplerini nasıl kullanabilirsiniz?