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

Ditulis oleh: Ifrod Maksum
Ditulis pada: 7/11/2017

Dalam sebuah website atau blog tidak akan lepas dari penggunaan font untuk mengatur tampilan teks postingan dan lainnya. Salah satu penyedia font adalah Google Font. Cara menggunakan font dari google font sangat mudah karena disediakan CSS external dari font yang ada dan kita hanya tinggal mengcopy link-nya untuk kemudian dipasang di blog, hanya saja penggunaan link external bisa menyebabkan CSS render blocking di pagespeed dan tentu saja akan menghambat loading itu sendiri.

Biasanya link CSS dari font google akan tampak seperti 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 menyebabkan render blocking, kita bisa membuat CSS @font-face dari font tersebut menjadi inline di style blog. Karena itu disini saya coba membagikan @font-face dari google font untuk Font Oswald. Silahkan ganti link CSS external dengan kode 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 langsung terbaca oleh browser. Sekian semoga bermanfaat...