• Cs-Cart Türkiye Destek ve Paylaşım Sitemize Hoş Geldiniz
  • Yeni Temamızla Daha işlevsel Sizlerleyiz.
  • Öneri ve Dileklerinizi Mesajla iİetiniz.
Hoşgeldiniz.! Lütfen Giriş Yap yada Kayıt Ol


Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Bilgi VivaShop temada kendi fontunu kullanmak
#1
Arkadaşlar vivashop tema üzerinde, temanın kullanmış olduğu Raleway isimli fontun Türkçe karakterleri desteklememesi ve bu sebeple de sistemin Türkçe harfleri karakterleri alakası bir stilde göstermesi yüzünden bir araştırmaya girdim.

Öncelikle bu fontun adı dosyalarda arayarak işe başladım. Bulduğum dosyalardan bir tanesi, design/themes/vivashop/css/ altındaki vs.less dosyasını inceledim.

Burada kullanılan fontla ilgili bilgiler gördüğüm için buradan yapacağım değişikliklerle işimi çözebileceğimi düşündüm.

Fakat bana öncelikle, özellikle TR desteği olan beğendiğim bir font seti lazımdı.

http://www.fonttr.com/ adtesini biraz inceledim ve Ubuntu işletim sisteminin fontu olan ve aynı adı taşıyan fontu kullanmaya karar verdim. Fontu indirdim.

Sıra geldi bu fontu internette kullanmak için bir çok tarayıcının tanıyabileceği woff, svg, eot formlarına dönüştürerek bir font seti hazırlamaya.

Bunun için http://www.fontsquirrel.com/tools/webfont-generator adresine girdim ve http://ugurozer.com/wordpress-ozel-font-...font-face/ adresindeki açıklamada yazılanları uygulayarak (bu adresteki gereken açıklama aşağıdaki gibidir) kendi font setimi yarattım. Size kullanmak istediğiniz fontun hazır bir seti varsa bu aşamaları atlayabilirsiniz.

Kod:
@font-face Generator yazısına tıkladıktan sonra hemen font yüklemeyin EXPERT alanına bir çeltik koyun ve aşağı indiğinizde Subsetting: Custom Subsetting… alanına çeltik atın ve Language: bölümünden Turkish alanını işaretleyin ki türkçe harflerinizde herhangi bir sorun oluşmasın.

Sonra yukarı çıkıp +Add Fonts butonuna tıklayıp pc’nizden fontu yükleyin. Yükledikten sonra o ayarların en aşağısında “Yes, the fonts I’m uploading are legally eligible for web embedding. Font Squirrel offers this service in good faith. Please honor the EULAs of your fonts.” yazısına bir çeltik kondurun ve devamında Download Your Kit butonuna tıklayın.

Bilgisayarınıza inen sıkıştırılmış dosyayı çıkartın ve içerisindeki .eot, .ttf, .woff, .txt’ uzantılı sayfaları wordpress dizinindeki tema adı /images/ dizininde “fonts” adında yeni bir klasör oluşturup buranın içine atın.

Daha sonra bu fontları design/themes/vivashop/media/fonts klasörünü altına attım. Font seti oluşturulurken fazladan tanıtım dosyaları oluşturulmuş olabilir. Siz uzantısı ttf, woff, svg, eot
olan 4 dosyayı bu klasöre atın.

Daha sonra vs.less dosyasının 2. satırındaki Raleway adını kullanmak istediğiniz fontun adıyla değiştirin.
Örnek:
Kod:
@font_two: Raleway;

üstteki gibi görünen 2. satırı aşağıdaki gibi değiştridim.
Kod:
@font_two: Ubuntu;


Daha sonra Raleway ile alakalı tüm satıları buldum.

Bunlardan bazıları aşağıdaki gibi idi. (src ile başlayan satılara dikkat)
Kod:
.gfonts(on){
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      src: url(https://themes.googleusercontent.com/static/fonts/raleway/v7/bIcY3_3JNqUVRAQQRNVteQ.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 700;
      src: url(https://themes.googleusercontent.com/static/fonts/raleway/v7/JbtMzqLaYbbbCL9X6EvaIxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
    }

ve aşağıdaki gibi değiştirdim. (siteye upload ettiğiniz kendi fontlarınızın tam yolunu yazıyorsunuz)

Kod:
.gfonts(on){
    @font-face {
      font-family: 'Ubuntu';
      font-style: normal;
      font-weight: 400;
      src: url(http://SİTEADRESİM.com/design/themes/vivashop/media/fonts/OLUŞTURDUĞUMUZ-FONT-ADI.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Ubuntu';
      font-style: normal;
      font-weight: 700;
      src: url(http://SİTEADRESİM.com/design/themes/vivashop/media/fonts/OLUŞTURDUĞUMUZ-FONT-ADI.woff) format('woff');
    }

Bu satırlardan kaç tane bulursanız hepsini değiştirin. Font uzantılarını aynı kalmasına dikkat edin. Mesela bir satırda ttf diğerinde woff, uzantıları ellemeyin dosya adlarını ve yolunu kendinize göre düzenleyin.

Birde aşağıdaki gibi yolu kısa olan satırlar var.

Kod:
.gfonts(off){
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      src: url(fonts/raleway-regular.ttf) format('truetype');
    }

Bunları da kendinize (dosya adlarınıza ve içinde bulunduğu klasör adına {aynı klasörü kullanın ve klasör adında değişiklik yapmayın bence} göre değişikliklerini yaptıktan sonra dosyayı kaydedin.

Kod:
.gfonts(off){
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      src: url(fonts/OLUŞTURDUĞUMUZ-FONT-ADI.ttf) format('truetype');
    }

Tüm bu değişikliklerde sonra var klasörü altındaki cache dosyasını komple silmeyi unutmayın.

Tahminimce aynı amaca hizmet eden fontun iki farklı lokasyondan gösterme tekniği kullanılmış. Birincisinin yani fontun http ile başlayan url sinin kullanılma amacı, ilk örnekte olduğu gibi fontun dışarıdan bir kaynaktan kullanılması. İkincisinin de fontun kendi sunucu üzerinde bulundurularak dışarıdaki fontun kaynağına erişilememsi halinde kendi üzerinden kullanması için. Bu paragrafı anlamadıysanız da dert etmeyin. Bilgi için sadece.

Aralarda bir şeyleri atlamadı iseniz. Artık Raleway fontu yerini TR destekli Ubuntu fontumuza bıraktı. Artık siz ne font kullanırsınız size kalmış.

Sorularınız veya ilave bilgiler varsa bu mesajın altına eklersiniz.

Faydalı olması ümidi ile.
Sahip olma duygusunun ayrılmaz parçasıdır KAYBETME korkusu!
Sahiplik duymadan sevmek cennet yaşantısıdır. Korkuların ise cehennem ateşin!
(Ahmed Hulûsi)
 
Cevap
#2
Teşekkürler açıklaman için PCmemo. Ancak bir not olarak şunu eklemek istiyorum: Mümkün olduğunca sistem fontlarının kullanılması tercih edilmelidir. Harici fontların sayfa yükleme zamanını ve boyutunu yükselteceği unutulmamalı. 500 kb tan 2 font yüklerseniz bu, her sayfaya ekstra 1 mb yüklemek demektir. BU bilgi de dikkate alınmalı.
 
Cevap
#3
Çok emin konuşmamakla birlikte şimdiki akıllı tarayıcılarda keş temizlenene kadar bu fontu 1 kere yüklemiş olması yeterli gibi geliyor. Her sayfayı açıkta tekrar tekrar bu fontu yüklemez. Hele ki cs-cart cache sistemine bu kadar önem veriyorken, zîrâ yaptığımız değişiklikleri görene kadar göbeğimiz çatlıyor, her yerden keş temizlemek zorunda kalıyoruz.
Sahip olma duygusunun ayrılmaz parçasıdır KAYBETME korkusu!
Sahiplik duymadan sevmek cennet yaşantısıdır. Korkuların ise cehennem ateşin!
(Ahmed Hulûsi)
 
Cevap
#4
Bir sayfaya 2. kez giren bir ziyaretçi için elbette önbellekleme sisteminden dolayı fontlar ikinci kez yüklenmeyecektir. Cs Cart önbellek sistemi buna imkan tanıyor. Ancak sayfaya ilk giriş yapan her ziyaretçi için bu fontlar zorunlu olarak yüklenecek.
 
Cevap
  


Hızlı Menü:


Tarama: 1 Ziyaretçi