internet sitesine dışarıdan font eklemek

Bu soru 1 kez yanıtlandı.

• coderguru

  3 Temmuz 2019 16:26

  35

  İster css olarak stylesheet dosyanızda, isterseniz de html sayfanız içerisinde <style></style> içerisinde aşağıdaki gibi font-face tanımlaması yapabilirsiniz. Bu uygulama ile güncel tarayıcılar tarafından desteklenen şekilde font eklemiş olursunuz.

  <style>
  @font-face {
      font-family: "ABC";
      src: url(https://www.siteadi.com/fonts/abcfontu.ttf) format("truetype");
  }
  .abcfontu { 
      font-family: "ABC", Arial;
  }
  </style>
  <p class="abcfontu">Font Deneme</p>

  Elbette burada siteadi.com yerine kendi internet sitenizin adını yazmanız gerekiyor.

  Alternatif olarak google web fonts kullanarak hem ttf dosyasını bilgisayara atmaktan kurtulursunuz, hem de tek satırda aşağıdaki gibi font ekleme işini çözmüş olursunuz.

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

  Kullanırken de:

  font-family: 'Roboto', sans-serif;

  Ancak google'daki font'ların sınırlı olduğunu da dikkate alarak zaman zaman dışarıdan font eklemek gerektiği çalışmalar oluyor elbette.

  Son olarak elinizde tüm font dosyaları mevcutsa aşağıdaki gibi en kapsamlı şekliyle font ailesi tanıtabilirsiniz:

  @font-face {
    font-family: 'ABC';
    src: url('fontdosyasi.eot');
    src: url('fontdosyasi.eot?#iefix') format('embedded-opentype'),
         url('fontdosyasi.woff') format('woff'),
         url('fontdosyasi.ttf')  format('truetype'),
         url('fontdosyasi.svg#ABC') format('svg');
  }

  Böylece hem eski internet explorer 6-7-8 için .eot?#iefix

  IE9 için eot

  Güncel tarayıcılar için woff

  Mobil tarayıcılar için ttf

  Eski iOS'lar için svg

  yazmış olursunuz.