Squarespace adalah platform populer untuk membuat situs web (blog), tetapi banyak pengguna menghadapi kendala ketika ingin mengunggah font kustom. Squarespace hanya menyediakan koleksi font bawaan, sehingga menambahkan font custom sering dianggap rumit. Namun, langkah-langkahnya sebenarnya cukup sederhana.
Pada artikel ini, saya akan memberikan tutorial lengkap, mulai dari mengunggah font kustom di Squarespace hingga menyesuaikan tampilannya menggunakan CSS. Ikuti tutorial berikut untuk membuat situs web tampil lebih unik dan sesuai dengan gaya branding Anda.
Daftar Isi
Menyiapkan Font Kustom
Sebelum menambahkan font khusus ke Squarespace, pastikan file font sudah tersedia dalam format OTF, TTF, atau WOFF. File font dapat diperoleh dari berbagai sumber online, baik gratis maupun premium. Setelah file font siap, langkah berikutnya bisa langsung dilakukan
Mengunggah Font Kustom ke Squarespace
Untuk mengunggah font ke Squarespace, masuk ke akun Squarespace dan buka menu Website.
scrol ke bawah sampai ketemu menu "Website Toolt" di bawah pada bagian Utilitas. Silahkan pilih untuk melanjutkan.
klik "Custom CSS" untuk membuka kotak pengiditan CSS kustom.
Klik panah tarik-turun di samping menu "Custom File", pilih "Add Images or Fonts", kemudia cari file font kustom yang tadi di komputer Anda.
Silahkan klik pada file font yang telah diunggah untuk menghasilkan URL. Salin URL ini, karena Anda akan membutuhkannya di langkah berikutnya.
Menambahkan dan Menerapkan Font Kustom
Sekarang setelah file font berhasil diunggah, langkah selanjutnya menggunakan CSS untuk menerapkannya ke Squarespace. Di panel CSS kustom, Anda perlu menambahkan baris kode berikut:
@font-face {
font-family: ‘NAME ’;
src: url(’URL ’);
}
h1, h2, h3, h4, p {
font-family: ’NAME ’;
}
- Bagian kedua berfokus pada di mana Anda ingin menerapkan font kustom tadi, misalnya pada:
H1,H2,H3, dll. - Bagian pertama kode menyertakan nama yang Anda berikan pada font dan URL tempat Anda mengambil font kustom
- Ganti kode
NAMEdengan nama font yang ingin ditetapkan ke font kustom Anda. Pastikan untuk menggunakan nama yang akan Anda ingat. - Ganti
URLdengan URL file font yang Anda salin pada langkah sebelumnya. - Pastikan nama font family juga disertakan pada bagian kedua kode, yaitu area target untuk penerapan font, agar perubahan dapat diterapkan dengan benar.
- Jika ingin menambahkan font kustom lain untuk jenis teks berbeda, cukup salin kode, sesuaikan nama font family dan URL-nya.
Kode ini sangat ideal jika Anda ingin menggunakan font yang berbeda dari font Adobe dasar yang disediakan Squarespace; faktanya, ini adalah satu-satunya cara untuk menyertakan font khusus di situs web Squarespace Anda.
Meskipun ini mungkin bukan cara paling sederhana untuk mengubah font teks situs web, tetapi setelah Anda terbiasa, langkah ini menjadi relatif mudah dilakukan
Cobalah dengan font dan gaya yang berbeda yang menargetkan jenis teks yang berbeda, dan pastikan untuk memeriksa sumber daya byCrawford Squarespace lainnya untuk tips dan trik lainnya.
Menyesuaikan Style Font Kustom
Sebenarnya pada langkah sebelumnya, font kustom sudah berhasil diterapkan. Namun, tentu kemungkinan Anda merasa font kurang sesuai keiinginan, maka dari itu langkah terakhir ini saya akan memebarikan tips penyesuain yang dapat lakukan dengan menggunakan tambahan CSS.
Berikut beberapa contoh cara menata atau mengubah pengaturan font kustom
a. Menyesuaikan Ukuran Font:h1 {
font-size: 36px;
}
p {
font-size: 16px;
}
h2 {
font-weight: bold;
}
h3 {
font-weight: 500;
}
h4 {
letter-spacing: 2px;
}
p {
letter-spacing: 1px;
}
Bereksperimen dengan properti CSS yang berbeda untuk mencapai tampilan yang diinginkan untuk font kustom.
Jika semuanya tampak seperti yang diharapkan, selamat! Anda telah berhasil menambahkan dan menata font khusus di Squarespace