Özel yazı tiplerini kullanma

Studio'ya bir özel yazı tipi dosyası yükleyip CSS font-face kuralını kullanarak HTML5 reklam öğelerine özel yazı tipleri ekleyebilirsiniz. 

Desteklenen yazı tipi dosyası türleri

• EOT
• OTF
• TTF
• WOFF
• WOFF2

Özel yazı tiplerini CSS ile yükleme

Reklam öğenizin CSS dosyasına, diğer stillerden önce @font-face kuralını ekleyin. Basit olması açısından bu örnekte yalnızca bir truetype yazı tipi dosyası kullanılmaktadır. Tarayıcı uyumluluğunu en üst düzeye çıkarmak için WOFF veya EOT yazı tipi dosyası kaynaklarını da eklemeniz gerekir. CSS Püf Noktaları'ndan font-face tarayıcı desteği hakkında daha fazla bilgi edinin.

CSS

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular.ttf') format('truetype');
}

Daha sonra, öğeleri aşağıdaki örnekte gösterildiği gibi biçimlendirmek için yazı tipi ailesi mülkünü kullanın. Bu örnekte, "text element" kimliğine sahip bir metin div öğesi için kullanılacak yazı tipi olarak Open Sans ayarlanmıştır.

CSS

#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}

Özel yazı tipi dosyanızı Studio'ya yükleme

Özel yazı tipi dosyanızı diğer reklam öğesi dosyalarınızla birlikte yükleyebilirsiniz. Aynı yazı tipini çok sayıda reklam öğesinde kullanmayı planlıyorsanız Öğe Kitaplığı'na da yükleyebilirsiniz.

Bir yazı tipini reklam öğesi dosyalarınızla yükleme

Bir özel yazı tipini tek bir reklam öğesinde kullanıyorsanız HTML, JavaScript ve resim dosyalarınızla birlikte yazı tipi dosyasını da yükleyebilirsiniz. 

Bir yazı tipini Öğe Kitaplığı'na yükleme

Bir özel yazı tipini çok sayıda reklam öğesinde kullanıyorsanız yazı tipini Öğe Kitaplığı'na yükleyerek zamandan tasarruf edin.

Yazı tipi dosyalarının boyutları büyük olabilir. Yazı tipi dosyası yüklenmeden sayfanın yüklemesini bekletmek için yükleme beklemeyi kullanın. Ayrıca, biçimlendirilmemiş metnin hoş görünmeyen bir şekilde bir anlığına gösterilmesini önlemek için yazı tipi dosyası yükleninceye kadar metni gizleyin.

Dinamik reklamlarda özel yazı tipleri kullanma

Bir dinamik reklamın tüm varyasyonlarında aynı özel yazı tipini kullandığınızda da yukarıda açıklanan yöntemi uygulayabilirsiniz.

Tek bir dinamik reklamın her bir varyasyonu için farklı özel yazı tipleri kullanmak istiyorsanız yazı tiplerini Öğe Kitaplığı'na yükleyin, ardından Öğe Kitaplığı yollarını alın ve bunları, feed'inize yerleştirin. Daha sonra, feed'deki yolları kullanarak metin öğesine ilişkin CSS font-face kuralını güncellemek için JavaScript yazabilirsiniz. Aşağıdaki örnekte, bir özel yazı tipini yüklemek ve ayarlamak için feed'deki iki sütun kullanılmaktadır: Kullanılacak yazı tipi ailesi adı için "fontname" sütunu ve yüklenecek yazı tipi dosyası için "font" sütunu.

JavaScript örnek kodu

var sheets = document.styleSheets; // Dizi benzeri bir StyleSheetList döndürür
var sheet = document.styleSheets[0]; // İlk stil sayfasını alın
sheet.insertRule("@font-face {
  font-family: 'dynamicContent.SampleElement[0].fontname';
  src: url('dynamicContent.SampleElement[0].font') format('truetype');
}", 0);

// "text-element" öğesini, yazı tipini kullanmak istediğiniz metin div öğesinin kimliğiyle değiştirin.
sheet.insertRule("#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}", 1);