OTF Uzantısını Siteye Webfont Olarak Ekleme

Rufiq Cavadov · 5 Haziran 2018

Merhabalar. Web sitemizde font sıkıntısı var. Azerice bazı harfler gözükmüyor. Sitemiz için bir font sitesi buldum. Sitedeki tüm fontlar Azerice harfleri destekliyor. Ama OTF uzantılı bir dosya türünde. Bunu siteme Webfont olarak nasıl ekleyip kullanabilirim ?

Marigold · 5 Haziran 2018

Tek başına OTF her tarayıcıya uyum sağlamayacaktır. Mümkün olan en sağlıklı yapı aşağıdaki gibidir.

CSS:

@font-face{
    font-family:'Font Name';
    src:url('WebFont.ttf') format('Truetype'),
        url('WebFont.svg') format('SVG'),
        url('WebFont.eot') format('Embedded-OpenType'),
        url('WebFont.woff') format('Woff');
}

HTML:

<span style="font-family:'Font Name'">Web Font</span>

Rufiq Cavadov · 5 Haziran 2018

Bu fontu nasıl kullanabilirim peki ?
Abel-Pro.zip

Marigold · 5 Haziran 2018

Rufiq Cavadov dedi:
Bu fontu nasıl kullanabilirim peki?
Abel-Pro.zip

CSS:

@font-face{
            font-family:'Abel-Pro';
            src:url('Abel-Pro.otf') format('OpenType');
            font-weight:400;
        }
        @font-face{
            font-family:'Abel-Pro-Bold';
            src:url('Abel-Pro-Bold.otf') format('OpenType');
            font-weight:700;
        }

Eldar · 5 Haziran 2018

Öncelikle kullanmak istediğiniz fontu webfont olarak convert etmeniz gerekmektedir. Internette birçok çevirici bulunmaktadır ama çoğunda Türkçe karakter sorunu yaşadığımdan dolayı en sevdiğim Online @font-face generator

Çevirdiğiniz fontların arasında style.css tarzında bir dosyada olacaktır ve onu siteye eklemeniz veya içindeki font-face kodlarını kendi CSS dosyanıza entegre etmeniz olayı çözecektir.

Not: Internet ortamında kullanacağınız fontların lisansla korunduğunu unutmayınız.

caparty · 25 Haziran 2018

Teşekürler

OTF Uzantısını Siteye Webfont Olarak Ekleme

Ayrıntılı düzenleme

Rufiq Cavadov

Gigapat

Eldar

Marigold

Ziyaretçi

Rufiq Cavadov

Gigapat

Marigold

Ziyaretçi

Eldar

Hectopat

caparty

Decapat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz