Kelebihan Menggunakan @font-face Untuk Memasang Font di Blog

Kelebihan Menggunakan @font-face Untuk Memasang Font di Blog - Ada beberapa cara yang dapat digunakan untuk memasang berbagai macam font pada blog. Cara yang paling sering digunakan adalah dengan menggunakan external link css dari font tersebut dan menggunakan internal css dengan menggunakan @font-face.

Baca Juga : Cara Mengetahui Font yang Dipakai Web / Blog Orang Lain

Jika kita menggunakan teknik external link css, pemasangan font di blog akan semakin mudah dan simpel, namun teknik seperti ini akan membuat blog kita terjerat blocking rendering, efeknya blog anda akan semakin lama untuk dimuat. Untuk mengatasi masalah tersebut, sebenarnya kita dapat menggunakan teknik defer loading pada font tersebut, namun cara tersebut tidaklah sepenuhnya efektif, namun sudah cukup untuk membuat blog kita tidak terkena dampak dari blocking rendering tersebut.

Seiring dengan berkembangnya dunia blogger, terfikirlah cara yang cukup efektif untuk memasang font di dalam blog, yaitu dengan menggunakan @font-face yang dipasang inline dalam css blog, sehingga tidak perlu lagi memasang external link css lagi. Dahulu pemasangan teknik seperti ini mungkin agak susah, karena minimnya tutorial mengenai hal ini, namun sekarang sudah banyak blog yang membahas tentang teknik ini.

Teknik @font-face ini mempunyai keunggulannya sendiri di banding dengan teknik external link css. Teknik @font-face ini akan menghindarkan kita dari blocking rendering, karena kita memuat font langsung dari internal css, tidak lagi menggunakan external link sebagai resource font.

Biasanya kita menggunakan jasa Google Font untuk mencarikan font blog kita. Misal kita akan mencari font "Roboto", jika kita menggunakan Google Font, maka kita akan diberikan external link css seperti ini.

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

Jika kita membuka externa link tersebut, maka kita akan melihat beberapa @font-face dengan type style font roboto yang berbeda beda seperti dibawah ini.

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu72xKOzY.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: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.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: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.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;
}

Ada type font cyrillic, greek, vietnamese, dan latin. Jika kita memasang external link css font roboto yang kita ambil dari Google Font, berarti sama saja dengan kita memasang semua type font roboto yang ada diatas tersebut.

Padahal kita tidak membutuhkan semua type font tersebut, kita hanya membutuhkan type latin untuk dipasang pada blog dengan huruf latin, karena kita menulis menggunakan huruf latin. Lain cerita jika anda menulis blog dengan bahasa vietnam, maka anda membutuhkan type font "vietnamese" untuk dipasang di blog anda.

Contoh pemasangan font Roboto di blog dengan huruf latin.

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.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;
}

Dengan begitu kita akan lebih bijak menghemat penggunaan resource css, dan blog pun akan semakin cepat untuk dimuat, teknik ini juga sangat disarankan bagi blog amp yang notabene nya resource css nya hanya dibatasi 50000 byte per halaman. Teknik ini juga sudah saya terapkan di template template terbaru saya.

Oke, segitu saja artikel Kelebihan Menggunakan @font-face Untuk Memasang Font di Blog kali ini, semoga anda dapat memahami dan dapat bermanfaat bagi anda semua, happy blogging ^_^. Selamat menunaikan ibadah puasa 1440 H.