Kalian harus tau juga dengan menggunakan trik external link css,Jadinya untuk pemasangan font di web blog akan semakin gampang dan simpel tentunya,hati-hati brow menggunakan trik seperti ini akan membuat situs 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.
Akhirul Qalam hanya itu yang bisa kami sampaikan dengan artikel Kelebihan Menggunakan @font-face Untuk Memasang Font di Blog saya ucapkan beribu-ribu hatur thnkqiuw semoga anda puas lahir batin dan dapat memahaminya dan juga bisa bermanfaat bagi seluruh manusia yang ada di jagat raya ini, Wasalam. Jangan lupa share yach.
