Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML

Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML

Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML


Bloggerntt.com - Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML, Pada dasarnya jenis font adalah salah satu elemen penting pada sebuah blog. Memasang font style untuk tampilan halaman website memang harus dicocokan dengan selera Anda, dan tentunya harus sesuai dengan tampilan website Anda.

Nah bagaimana cara menambahkan custom fonts pada halaman blog yang valid Google AMP? Berikut ini akan saya jelaskan cara menambahkan dan menerapkan custom fonts pada blog Google AMP HTML.

Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML

Berikut ini merupakan 5 situs penyedia font yang banyak digunakan dalam template blogger :


  1. Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
  2. Google Fonts: https://fonts.googleapis.com
  3. Fonts.com: https://fast.fonts.net
  4. Typekit: https://use.typekit.net
  5. Typography.com: https://cloud.typography.com

Memasang Custom Font dari Google Font




a. Anda masuk ke fonts.google.com , silahkan pilih salah satu jenis font yang diinginkan.
Contohnya: Open Sans.
b. Anda klik Select this Font, akan keluar pop up modal dan muncul kode yang harus anda tambahkan sebelum kode </head>.

Dalam penerapanya menggunakan tag <link> dan CSS @font-face


1. Menggunakan tag <link> (Not Recomended)

Cara pertama adalah dengan menggunakan tag link, namun tidak saya sarankan karena akan memepengaruhi loading situs blog, jika template blog Anda banyak javascriptnya.
Untuk menggunakan tag <link> , caranya dengan menambahkan link dibawah ini sebelum kode </head> pada template blog:

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'/>

2. Menggunakan CSS @font-face (Recomended)

Cara ini sangat saya rekomendasi, karena hanya menggunakan tag CSS sehingga dapat mengurangi beban loading template blog.

Ambil kode CSS fontnya dengan membuka URL font tersebut di tab baru, lalu copy semua kode CSS yang ada, kemudian tambahkan di antara kode <style amp-custom='amp-custom> ... </style> di template blog.
Contohnya :
  • Link URL font : https://fonts.googleapis.com/css?family=Open+Sans

  • Copy URL diatas pada tab baru browser, akan muncul kode CSSnya seperti dibawah ini.


/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  • Selanjutnya kode diatas ini harus anda tambahkan dalam tag <amp-custom>. Contoh sederhana kode tersebut akan menjadi seperti di bawah ini.
    
    <style amp-custom>
      @font-face {
        font-family: "Open+Sans";
        src: url("https://fonts.googleapis.com/Open+Sans.ttf");
      }
    </style>

  • Untuk memasang font diatas pada template blog, Anda gunakan CSS property font-family. Ccontohnya seperti bawah ini.

  • 
      body {
        font-family: "Open+Sans", sans-serif;font-size:16px;font-weight:400;
      }

    Sampai disini pembahasan kali ini, semoga posting tentang Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML dapat bermamfaat untuk Anda teman. Jangan lupa berikan komentarnya.
    Blogger
    Disqus
    Pilih Sistem Komentar

    No comments

    ۝ Peraturan dalam berkomentar :

    ☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
    ☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
    ☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
    ☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
    ☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
    ☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

    Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

    Advertiser