Home » Blog » Website » Font Google Sans dan Cara Memasangnya di Blog

Font Google Sans dan Cara Memasangnya di Blog

Google Sans adalah font yang agak lumayan susah untuk dicari. Mungkin itu font gak mau disamain oleh brand apapun kali ya. Silakan anda cari di internet itu fonts, pada awalnya anda pasti akan ketemu halaman-halaman yang tidak anda harapkan. Karena keywords tersebut sangatlah pasaran.

Saya sering menggunakan font tersebut, karena dimata saya font tersebut begitu nyaman dilihat, jadinya saya merasa cocok dengan bentuk nya. Apalagi itu adalah trend jenis font terbaru yang banyak di pakai oleh para seniman digital.

Baca : Font Rekomendasi Yang Keren Untuk Desain Anda

Saya sering menggunakan untuk project yang berhubungan dengan desain grafis dan desain UI web atau aplikasi. Artinya harus berurusan dengan skrip pemanggilnya. Lalu apakah tersedia di website eksternal (bukan hosting milik kita)? Jawabannya ada.

Cara menggunakan Font Google-Sans di Web/Blog

Berikut ini adalah kode css yang bisa kita gunakan di dalam style atau css yang kita embed di server. Jangan lupa ya untuk mengarahkan font Google sans ini ke halaman postingan Web atau blog anda :

@font-face{font-family:’Google Sans’;font-style:normal;font-weight:400;src:local(‘Google Sans Regular’),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format(“woff2”);unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:’Google Sans’; font-style:normal;font-weight:400;src:local(‘Google Sans Regular’),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2) format(“woff2”);unicode-range:U+0370-03FF} @font-face{font-family:’Google Sans’;font-style:normal;font-weight:400;src:local(‘Google Sans Regular’),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.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} @font-face{font-family:’Google Sans’;font-style:normal;font-weight:400;src:local(‘Google Sans Regular’),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Owp4.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} @font-face{font-family:’Google Sans’;font-style:normal;font-weight:500;src:local(‘Google Sans Medium’),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2) format(“woff2”);unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:’Google Sans’;font-style:normal;font-weight:500;src:local(‘Google Sans Medium’),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2) format(“woff2”);unicode-range:U+0370-03FF} @font-face{font-family:’Google Sans’;font-style:normal;font-weight:500;src:local(‘Google Sans Medium’),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.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} @font-face{font-family:’Google Sans’;font-style:normal;font-weight:500;src:local(‘Google Sans Medium’),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.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}

Sedangkan untuk pemanggil kedalam konten yang kita inginkan, gunakan saja skrip css seperti biasanya:

body {font-family: -apple-system, BlinkMacSystemFont, ‘Google Sans’, ‘Roboto’, ‘Segoe UI’, ‘Oxygen-Sans’, ‘Ubuntu’, ‘Cantarell’, ‘Helvetica Neue’, sans-serif;
font-size: 16px;
color: #444444;
font-weight: normal;
line-height: 1.4em;
text-decoration: none;
}

Buat yang males nyalin, langsung download aja disini :

Sebelum sampai pada penutup, saya kasih anda link bagi yang suka eksplore fonts dari halaman Github resminya google ini, anda bisa akses disini ya:
https://github.com/googlefonts

Atau bagi yang suka kepo sama perkembangan desain dari Google khusus untuk Font, bisa juga baca di : https://design.google/library/google-fonts/

Penutup

Sampai saat ini saya belum mencari informasi tentang hak cipta/copyright dari penggunaan font google sans ini. Semoga di bikin open source ya sama mereka. Tapi kalau anda pengunjung blog ini sudah mendapatkan infonya, monggo di share di halaman komentar.

Yang saya temukan baru halaman License Product Sans dari google, itu juga isinya cuma ada sebaris tulisan :

Google offers many fonts under open source licenses. This is not one of them. Please see fonts.google.com for options you can use.

Google Fonts

Oke boss, Intinya gitu deh cara memasang Font Google Sans untuk digunakan pada halaman Blog atau website anda.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *