Aşağıdaki makale size yardımcı olacaktır:Shopify Temalarına 5 Dakikadan Kısa Bir Sürede Yazı Tipleri Nasıl Eklenir?
Shopify şüphesiz e-ticaret alanında liderdir. Ölçeklendirebileceğiniz bir mağaza oluşturmak söz konusu olduğunda, birden fazla kanalı, sipariş karşılama merkezini, ödeme işlemcilerini ve e-posta pazarlamasını yönetme becerisi gibi her şeye sahip gibi görünüyor; bunların yanı sıra mağazaların dayanıklı, hızlı ve binlerce işlemi gerçekleştirebilme kapasitesini koruyor. Dakikada.
Ancak konu yazı tiplerine gelince, kullanıma hazır seçenekleri kesinlikle sınırlıdır.
Bazı mağazalar temel yazı tiplerini veya temalarıyla birlikte gelen yazı tiplerini kullanmayı kabul etse de, markanızı ön plana çıkaracak özel yazı tipi seçeneklerini tercih edebilirsiniz.
Peki nereden başlayacaksınız? Ve Shopify’a kolayca yazı tiplerini nasıl ekleyebilirsiniz?
Bu kılavuzda Shopify yazı tipleriyle ilgili her şeyi derinlemesine inceleyerek şunları keşfediyoruz:
Başlayalım.
#cta-visual-pb#
–
Shopify’da mevcut yazı tipleri nasıl bulunur?
Shopify’ın düzenleme özelliklerine aşina olduğunuzda Shopify yazı tiplerinizi bulmak oldukça basittir.
Ancak, eğer her konuda yeniyseniz, sadece birkaç kolay adım atmanız yeterli:
1. Adım: Shopify tema düzenleyicisine gidin
Kontrol panelinize giriş yaptıktan sonra soldaki menüye gidin ve Çevrimiçi Mağaza > Temalar > Özelleştir.
Adım 2: Tipografi ayarlarına gidin
Temanızın düzenleme kontrol paneliyle karşılaşacaksınız. Burası mağazanızın görünümünü değiştirebileceğiniz yerdir.
Sınırlı olmasına rağmen Shopify’a yazı tipi ekleme yeteneği de dahil olmak üzere bazı kullanışlı özelliklerle birlikte gelir.
Sol taraftaki menüde boya fırçası simgesine tıklayın. Tema ayarları ve bul Tipografi.
Aşama 3: Başlıklarınız ve gövde metniniz için yazı tiplerini değiştirin
Evrensel tema ayarlarınızı değiştiren bir seçenekler menüsü bulacaksınız. senin içinde Tipografi Ayarlar’a tıklayın Değiştirmek Başlıklarınızın ve gövde metninizin yazı tiplerini güncellemek için düğmeyi kullanın.
Ayrıca her metin türü için yazı tipi boyutlarını ayarlayabilir ve yazı tipi ağırlıklarını değiştirebilirsiniz.
Muhtemelen birçok popüler Shopify yazı tipini zaten tanıyacaksınız. Ancak öne çıkmak için kendi yazı tipi kombinasyonunuzu oluşturmayı deneyebilirsiniz.
4. Adım: Değişikliklerinizi kaydedin ve yeni yazı tiplerine hayran kalın
Tercih ettiğiniz yazı tipini seçtikten sonra Seçme altta. Ardından Kaydetmek sağ üst köşedeki düğmeye basın.
İşte! Shopify yazı tiplerinizi Shopify’ın mevcut yazı tipi kitaplığıyla değiştirdiniz.
Değişikliklerinizi yaparken Shopify tema yazı tiplerinizi gerçek zamanlı olarak önizleyebileceksiniz.
Shopify yazı tipi kitaplığını kullanma
Shopify yazı tipi seçici size çok sayıda yazı tipi seçeneği sunar.
Yazı tiplerini Serif, Sans Serif veya Mono türlerine göre sıralamanıza olanak tanır. izin verme bu terimler seni korkutmak.
Her birinin ne anlama geldiğine dair hızlı bir genel bakış:
Serif
Serif yazı tipi, Times New Roman veya Georgia gibi yazı tiplerindeki harflerde gördüğünüz küçük uçlar olan harflerin ucunda konturlar veya dekoratif tasarımlar bulunan bir yazı tipidir.
Resim: Ingenex
Sans Serif
Sans serif yazı tipi, uçlarında o küçük “kuyruklara” veya uzantılara sahip olmayan harflerden oluşan bir yazı tipidir. Bunlar “serif”sizdir. Helvetica veya Arial yazı tipleri, sans serif yazı tiplerinin klasik örnekleridir.
Resim: Ingenex
Mono
Tek veya tek aralıklı yazı tipi, aynı miktarda alanı kaplayan harflerle oluşturulan bir yazı tipidir.
Resim Ingenex
Shopify’ın tipografi listesi, daha önce görmüş olabileceğiniz oldukça basit yazı tiplerinden oluşur.
Shopify yazı tipi kitaplığınıza gittiğinizde yazı tipleri zaten şu şekilde düzenlenmiştir: Sistem Yazı Tipleri Ve Diğer Yazı Tipleri.
Sistem Yazı Tipleri kullanıcının bilgisayarında yüklü olduğundan daha hızlı yüklenen ve indirme ihtiyacını ortadan kaldıran yazı tipleridir.
Diğer Yazı Tipleri kullanıldığında kullanıcının bilgisayarına indirilen ve muhtemelen daha yavaş yükleme sürelerine neden olan yazı tipleridir.
#cta-visual-pb#
Shopify mağazanıza yazı tipleri nasıl eklenir?
Shopify mağazanıza yeni yazı tipleri eklemenin birkaç yolu vardır.
Kodlamada yeniyseniz bazıları zor olabilir ve doğru şekilde yapmak biraz zaman alabilir. Ancak daha kolay seçenekler de mevcut ve bunları da tartışacağız.
Kod konusunda rahat değilseniz, koda ihtiyaç duymadan daha fazla özel yazı tipine erişmek için Shogun gibi bir uygulamayı kullanmayı da deneyebilirsiniz.
Shopify’a Google Yazı Tipleri nasıl eklenir?
Beğendiğiniz Google Fontları mağazanızın font kütüphanesine birkaç adımda eklemeniz mümkün. Bu konuyu Yardım Merkezimizde de kısaca ele alıyoruz.
Aşama 1: Tercih ettiğiniz Google yazı tipini bulun
Ziyaret edin Google Yazı Tipleri sitesine gidin ve yazı tipinizi seçin.
Yazı tiplerinizi kategori, dil, yazı tipi özellikleri, en popüler, en yeni, ad ve hatta trend dahil olmak üzere birkaç farklı kritere göre filtreleyebildiğinizi göreceksiniz.
Adım 2: Yazı tipi ayrıntılarına girin, yazı tipinizi seçin ve kodu kopyalayın
Seçtiğiniz yazı tipine tıkladığınızda yazı tipi boyutunu ayarlayabilir, glifleri, Lisansı ve hatta diğer hangi yazı tipleriyle en iyi şekilde eşleştiğini kontrol edebilirsiniz.
Shopify mağazanız için kullanılacak en iyi yazı tipinin hangisi olduğunu görmek için biraz zaman ayırın.
“Bu stili seç” butonuna tıkladığınızda açılan pencereden kodu kopyalayabileceksiniz.
Aşama 3: Tema dosyalarınıza gidin ve kodu head etiketine yapıştırın
Shopify kontrol panelinizden kodunuzu kopyaladıktan sonra şuraya gidin: Çevrimiçi Mağaza > Temalar > Eylemler > Kodu Düzenle.
Tıklamak Düzen > theme.liquid.
Oradan aşağı kaydırın ve etiketini seçin ve kodu etiketin hemen önüne yapıştırın. İşiniz bittiğinde değişikliklerinizi kaydedin.
4. Adım: Temanızın stil dosyalarını açın
Daha sonra “Varlıklar” klasörüne gidin. “theme.scss.liquid” ve “timber.scss.liquid” adlı iki stil dosyasını bulacaksınız. Onları aç.
5. Adım: Google’dan yazı tipi CSS kurallarını kopyalayın
Kullandığınız Google Font’un sayfasına geri dönün. Orada yazı tipi adını kopyalamanız gerekecek. Benim durumumda bu “’Lato’, sans-serif;”.
Adım 6: Stil dosyalarına yazı tipi ayrıntılarını ekleyin
Ve son olarak Varlıklar klasöründe açtığınız önceki stil dosyalarına geri dönün. “Tipografi” bölümüne ilerleyin ve şu 3 kod satırını değiştirin:
$headerFontStack: {{ başlık_family.family }}, {{ başlık_family.fallback_families }};
$bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};
ile:
$headerFontStack: ‘Rampart One’, el yazısı;
$bodyFontStack: ‘Rampart One’, el yazısı;
$accentFontStack: ‘Rampart One’, el yazısı;
Şimdi Google Fonts’u kullanmanın daha kolay yolu için.
Shogun’da Google Fonts’u Kullanmak
Shopify’a manuel olarak bir Google Yazı Tipi ekleme sürecinden geçmek istemiyorsanız bunu yapmanın daha kolay bir yolu var: Shogun Sayfa Oluşturucu.
Shogun ile, herhangi bir Google Yazı Tipini Shopify mağazanıza eklemek, Google’ın tüm Yazı Tipleri önceden yüklenmiş olduğundan kelimenin tam anlamıyla bir adım sürer.
Biz de abartmıyoruz.
Bir başlığa tıklamak, yazı tipi açılır menüsünü açmak ve sonuçtan memnun kalana kadar yazı tipi seçiminizi yapmak kadar kolaydır.
#cta-visual-pb#
Shopify’a özel yazı tipleri nasıl eklenir?
Shopify özel yazı tiplerini kullanmakla ilgilendiğiniz bir noktaya gelmiş olabilirsiniz.
Bunları yüklemek gelişmiş kodlama becerileri gerektirir ve bu süreçte mağazanızın zarar görmemesi için çok dikkatli olmanız gerekir.
Aşağıda bunu adım adım anlatacağız.
Aşama 1: Üçüncü taraf yazı tipinizi edinin
Öncelikle kullanmak istediğiniz üçüncü taraf yazı tipini bulup satın alın ve onu EOG, SVG, TTF, WOFF veya WOFF2 gibi belirli dosya türlerinde aldığınızdan emin olun.
Ardından Shopify kontrol panelinizden şuraya gidin: Çevrimiçi Mağaza > Temalar > Eylem > Kodu Düzenle’ye tıklayın.
Adım 2: Stil sayfanızı Varlıklar’da bulun ve yazı tipi dosyalarınızı yükleyin
Basit bir kontrol paneliyle karşılaşacaksınız.
Menü seçeneklerine biraz aşina olmak her zaman iyi bir fikirdir, böylece farklı ayarlar arasında gezinirken kendinizi güvende hissedersiniz.
Buradan aşağı kaydırın ve tıklayın Varlıklar kenar çubuğunda.
Şimdi, işin biraz bunaltıcı olabileceği yer burası.
Ekranda gördüğünüz mevcut kodlardan hiçbirini düzenlememeye dikkat edin. Kenar çubuğunda Varlıklar >Yeni Varlık Ekle > Yükle Yazı tipi dosyalarınızı yüklemek için.
Aşama 3: Aşağıdaki kodu theme.scss.liquid dosyasına yapıştırın
Şu yöne rotayı ayarla Varlıklar, ardından theme.scss.liquid dosyasını açın. Oraya vardığınızda, dikkatlice aşağıya gidin ve aşağıdaki kodu kopyalayıp yapıştırın:
@yazı tipi yüzü {
yazı tipi ailesi: “FONT”;
src: url(‘{{ “FONT.eot” | asset_url }}’);
src: url(‘{{ “FONT.eot” | asset_url }} ?#iefix’) format(“embedded-opentype”),
url(‘{{ “FONT.woff” | asset_url }}’) format(“woff”),
url(‘{{ “FONT.woff2” | asset_url }}’) format(“woff2”),
url(‘{{ “FONT.ttf” | asset_url }}’) format(“truetype”),
url(‘{{ “FONT.svg” | asset_url }} #FONT’) format(“svg”);
}
4. Adım: Yeni yazı tipinizi yansıtacak şekilde kodu güncelleyin
Az önce yapıştırdığınız kodun içinde, “FONT” yerine yazı tipinizin adını yazın ve tam olarak eşleşmesi için ismin içine kısa çizgi veya alt çizgi eklemeyi unutmayın.
Yüklediğiniz dosya türlerine bağlı olarak bu kod yığınına satır eklemeniz veya kaldırmanız gerekebilir (örneğin, woff2 dosyası yüklemiyorsanız woff2 satırını tamamen kaldırın).
Bu kodun hemen altına değiştirmek istediğiniz metin türleri için aşağıdaki kodu ekleyin.
Bu örnekte başlıkları değiştireceğiz, ancak değiştirmek istediğiniz metin türlerini bu kod satırına ekleyebilirsiniz (tıklayın) Burada CSS yazı tipi kılavuzu için).
Ve yine “FONT” yerine yazı tipinizin adını yazın:
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: ‘FONT’ !önemli; }
Adım 5: Değişikliklerinizi kaydedin ve yeni yazı tipinizde huzuru bulun
Hepiniz bittiğinde, mutlaka Kaydetmek değişiklikleriniz.
Tebrikler! Yazı tipiniz Shopify’a başarıyla eklendi. Birden fazla yazı tipi yüklemek istiyorsanız bunu tek tek yapmanız gerekir.
Çok kolay değil ama bunu başardığınızda derin bir gurur duygusuna sahip olacaksınız.
Shogun ile Shopify’a özel yazı tipleri nasıl eklenir?
Yazı tipini temanıza ekledikten sonra onu Shogun Sayfa Oluşturucu ile entegre etmeye yalnızca birkaç kolay adım uzaktasınız.
Daha sonra bunu mağazanızın her yerinde başlık veya gövde kopyası olarak kullanabilirsiniz. Bu sefer sadece üç kolay adım.
Adım 1: Sayfa Oluşturucu’da Ayarlarınıza gidin–
İlk önce devam edin ve Shogun uygulamasını açın ve Ayarlar simge.
Adım 2: Yeni yazı tipinizi ekleyin
Daha sonra aşağıya doğru ilerleyin Özel Yazı Tipleri Ekle alanına yazı tipinin adını girin.
Bu alan büyük/küçük harfe duyarlıdır ve kısa çizgilerin, alt çizgilerin ve tüm ek karakterlerin de yazı tipi için doğru olduğundan emin olmak isteyeceksiniz.
Bu işlemi tamamladığınızda, Yazı Tipi Ekle.
Aşama 3: Hepiniz bitti!
İşte buyur. Artık özel yazı tipinizin artık metin düzenleyicinin yazı tipi açılır menüsüne dahil edildiğini göreceksiniz.
Bu kadar kolay. Bu gerçek bir üçüncü adım bile değildi!
Shogun ile bunu ihtiyaç duyduğunuz sayıda yazı tipi için hiç zorlanmadan oldukça sorunsuz bir şekilde yapabilirsiniz.
Shogun ile seçebileceğiniz daha fazla yazı tipi
Shogun ayrıca Shopify’da elde edemeyeceğiniz bir dizi farklı yazı tipi seçeneği de sunar.
Başka bir deyişle, Shopify için yazı tipi bulma sürecini kolaylaştırır; mağazanızın sayfalarını hızlı bir şekilde ve markanızın tarzına göre oluşturmanıza yardımcı olur.
İşte birkaçına hızlı bir genel bakış.
sürüngen
Bu ürkütücü yazı tipi, parti mağazalarının Cadılar Bayramı bölümü için mükemmeldir ve herhangi bir mağaza, onu Cadılar Bayramı temalı indirimler veya promosyonlar için kullanabilir.
Kartal Gölü
Eagle Lake, mücevher, tasarım saatleri veya diğer lüks eşyaları satan mağazalarla iyi uyum sağlar.
Daha Hızlı Olan
Bu yazı tipi, her türlü otomotiv mağazasıyla bariz bir şekilde eşleşir ve diğer yönlerden hızlı olan ürünleri (hızlı bilgisayarlar, hızlı kuruyan boya vb.) öne çıkarmanıza yardımcı olabilir.
Parmak boyası
Hangi okul malzemesi mağazası öğrencilerin kendileri tarafından yapılmış gibi görünen bir yazı tipi istemez ki?
Oyuncak mağazaları ve çocuk bölümleri olan giyim mağazaları da bu yazı tipini iyi bir şekilde kullanabilir.
Başlat 2P’ye basın
Bu oyun temalı yazı tipi o kadar stilize edilmiştir ki onu mağazanızın başlığında logo yerine bile kullanabilirsiniz.
Shogun ile Shopify yazı tiplerini kolay yoldan değiştirme
Shopify’ı Shogun Page Builder Uygulaması ile birleştirerek sayfalarınızın görünümü ve işlevselliği üzerinde çok daha fazla kontrole sahip olacaksınız. Shopify’ın temel özelleştirme seçenekleriyle sınırlı olmanıza gerek yok.
Shogun’un kullanımı kolay arayüzü, bir dizi heyecan verici (ve sıkıcı) yazı tipi arasından seçim yapmanızı sağlar.
Google Fonts önceden yüklenmiş olarak gelir; dolayısıyla kodu düzenleme veya bir geliştiriciyi işe alma konusunda endişelenmenize gerek yoktur.
Aslında metin editörü, 1052 yazı tipinin neredeyse her birini içerir. Google Yazı Tipleri kitaplığıböylece bunları manuel olarak yüklemeniz gerekmez.
Bu yazı tiplerine erişmek ve bunları değiştirmek için:
Shogun’a kaydolduktan sonra tıklayın Uygulamalar Shopify kontrol panelinizde Shogun Sayfa Oluşturucu’yu seçin.
Mevcut bir sayfayı seçin veya tıklayın Yeni oluştur > Sayfa. Önceden oluşturulmuş bir şablon seçebilir veya boş bir sayfayla başlayabilirsiniz. Sayfa ayrıntılarını ekleyin ve özelleştirmeye başlayın.
Düzenlemek istediğiniz metin kutusuna çift tıklayın ve metninizi vurgulayın. Mevcut yazı tiplerini arayın veya kaydırın. İstediğiniz yazı tipini seçin ve Kaydetmek değişiklikleriniz.
Eğlence burada bitmiyor. Ayrıca yazı tipi başlık türünü, yazı tipi boyutunu, satır yüksekliğini, metin rengini, hizalamasını veya harf aralığını da kolayca ayarlayabilirsiniz.
Yazı tiplerinizin farklı ekranlarda nasıl görüneceğini görmek ister misiniz? Farklı ekran boyutlarında görmek için Shogun’un Görünüm özelliğini deneyin.
Shogun size daha fazla Shopify yazı tipi seçeneği sunar
Özel Shopify yazı tiplerinin eklenmesi birçok şekilde yapılabilir.
İster özel yazı tipleri yüklüyor olun ister Google Fonts’u kullanıyor olun, Shogun gibi bir araç kullanmak, tüm yazı tipi ihtiyaçlarınızı yönetmenin en kolay yoludur.
En önemlisi temanızın kodunu düzenleme ihtiyacını ortadan kaldırarak mağazanıza zarar verme tehlikesinden kaçınmanıza yardımcı olur.
#cta-visual-pb#
