AKINSOFT E-Ticaret Programında CSS Kullanarak Yazı Fontlarını Değiştirme

Eklenme Tarihi : 08.11.2016
Görüntülenme Sayısı : 2000

E-Ticaret sisteminizde herhangi bir alanın yazı puntosunu değiştirme işlemi için aşağıdaki adımları uygulayabilirsiniz. Örneklerde google fontları kullanılmıştır. Farklı fontları kullanmak istiyorsanız, geliştiricinizden konu hakkında destek alabilirsiniz.

1. Adım: Google fontlarından kullanmak istediğinizi seçim yapınız. Bu işlem için https://fonts.google.com/ sayfasını ziyaret edebilirsiniz.

2. Adım: Kullanmak istediğiniz fontun yan kısmında yer alan artı şeklindeki butona basınız. Alt kısma siyah bir uyarı çıkacaktır. Bu uyarıyı tıklayınız. 

 

3. Adım: Siyah uyarı ekranında çıkan https:// ile başlayan kodu, tırnak işaretlerini almadan kopyalayınız. Başına @import url(' yazınız ve içerisine bu kopyaladığınız alanı yapıştırarak tırnağı ve parantezi kapatınız. İki nokta üst üste koyduktan sonra fontunu değiştireceğiniz alanı belirlemek için sitenizi açınız.

 

 

Örneğin sitenizin üst kısmında yer alan indirimdekiler, yeni ürünler ve karşılaştırma listesi gibi yazılarının bulunduğu kısmı değiştirecekseniz bu alana sağ tıklayarak inceleyi seçiniz.

 

4. Adım: Açılan ekranda . navbar ile başlayan alanı aşağıda gösterildiği kadarki kısma kadar seçerek kopyalayınız. 

 

5. Adım: E-Ticaret panelinizi açınız. Diğer başlığından görünüm ayarları kısmına giriniz ve geliştirici ayarları alanındaki üst bölüm ek css kısmına ilk oluşturduğunuz kodu ve değiştirmek istediğiniz alan için kopyaladığınız kodu yapıştırınız.

6. Adım: Küme parantezi açarak içerisine google fontunda belirtilen ikinci kodu yapıştırınız. Yukarıdaki örnek resimde hangi alanı alacağınız belirtilmektedir. Daha sonra köşeli parantezi kapatınız. Şu şekilde bir kod oluşacaktır: 

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
.navbar-default .navbar-nav > li > a {
font-family: 'Indie Flower', cursive; }
 

 

Bu ayarlamalardan sonra kaydet butonuna basarak işlemi tamamlamış olursunuz. Sitenizde belirttiğiniz değişiklikler aşağıdaki gibi görüntülenir.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Bu bilgi yararlı oldumu ?