Font Face Google Font Untuk Font Oswald Agar Loading Blog Lebih Cepat

Dalam sebuah website atau blog tidak akan lepas dari penggunaan font untuk mengatur tampilan teks postingan dan lainnya. Salah satu penyedia font yaitu Google Font. Cara memakai font dari google font sangat gampang alasannya yaitu disediakan CSS external dari font yang ada dan kita hanya tinggal mengcopy link-nya untuk lalu dipasang di blog, hanya saja penggunaan link external dapat menjadikan CSS render blocking di pagespeed dan tentu saja akan menghambat loading itu sendiri.

Biasanya link CSS dari font google akan tampak menyerupai ini:

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">

Nah untuk mengatasi supaya link CSS external tersebut tidak menjadikan render blocking, kita dapat menciptakan CSS @font-face dari font tersebut menjadi inline di style blog. Karena itu disini aku coba membagikan @font-face dari google font untuk Font Oswald. Silahkan ganti link CSS external dengan isyarat berikut ini:

@font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 300;
 src: local('Oswald Light'), local('Oswald-Light'), url(https://fonts.gstatic.com/s/oswald/v13/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/oswald/v13/HqHm7BVC_nzzTui2lzQTDVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/oswald/v13/HqHm7BVC_nzzTui2lzQTDaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
 }
 @font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 400;
 src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v13/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'), url(https://fonts.gstatic.com/s/oswald/v13/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2'), url(https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
 }
 @font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 500;
 src: local('Oswald Medium'), local('Oswald-Medium'), url(https://fonts.gstatic.com/s/oswald/v13/KuTkTNzljLi-9-e4QiI83j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/oswald/v13/KuTkTNzljLi-9-e4QiI83ltXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/oswald/v13/KuTkTNzljLi-9-e4QiI83qCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
 }
 @font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 600;
 src: local('Oswald SemiBold'), local('Oswald-SemiBold'), url(https://fonts.gstatic.com/s/oswald/v13/y5-5zezrZlJHkmIVxRH3BT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/oswald/v13/y5-5zezrZlJHkmIVxRH3BVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/oswald/v13/y5-5zezrZlJHkmIVxRH3BaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
 }
 @font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 700;
 src: local('Oswald Bold'), local('Oswald-Bold'), url(https://fonts.gstatic.com/s/oswald/v13/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/oswald/v13/bH7276GfdCjMjApa_dkG6VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/oswald/v13/bH7276GfdCjMjApa_dkG6aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
 }

Silahkan pilih sesuai dengan font style blog anda, sebaiknya disimpan di style paling atas blog anda supaya pribadi terbaca oleh browser. Sekian supaya bermanfaat...
Sumber https://www.nengain.web.id/