Cara Mengganti Font di Squarespace 7.1 (Site Styles + CSS)

Ganti font di Squarespace 7.1 lewat Site Styles, unggah file font sendiri, atau atur satu elemen dengan CSS kustom. Langkah, tabel pilihan, dan solusi masalah.

Pertanyaan yang sering diajukan

Bagaimana cara mengganti font di seluruh situs Squarespace saya?

Di situs versi 7.1, buka Site Styles, klik Fonts, lalu pilih font pack yang direkomendasikan atau buka All Font Packs dan filter berdasarkan sans-serif, serif, atau campuran. Satu font pack langsung mengatur font untuk judul, paragraf, tombol, dan teks lainnya sekaligus.

Bisakah saya memakai Google Font apa pun di Squarespace?

Anda bisa mencari Google Fonts berdasarkan nama di menu dropdown font, tetapi pusat bantuan Squarespace sendiri menyebutkan bahwa tidak semua Google Font tersedia di pustakanya. Jika font yang Anda inginkan tidak ada, Anda bisa mengunggah file font sendiri, selama lisensinya mengizinkan.

File font jenis apa yang bisa diunggah ke Squarespace?

Pengunggah font di Site Styles menerima file OTF, TTF, WOFF, dan WOFF2. Area Custom Files yang terpisah, yang dipakai bersama editor CSS, hanya mencantumkan TTF, OTF, dan WOFF, jadi untuk file WOFF2 gunakan pengunggah di Site Styles, bukan area file CSS.

Apakah saya perlu izin untuk mengunggah font kustom?

Ya. Pusat bantuan Squarespace menyatakan bahwa Anda memerlukan izin dari pemilik atau pemberi lisensi font untuk memakainya di situs Anda. Periksa lisensi untuk penggunaan web sebelum mengunggahnya.

Mengapa langkah mengganti font di situs saya berbeda?

Situs versi 7.0 dan 7.1 memiliki pengaturan font yang berbeda. Langkah dalam panduan ini untuk versi 7.1. Di versi 7.0, perubahan font dilakukan melalui Site Styles di panel Design. Squarespace juga mencatat bahwa font Adobe kustom yang diatur di 7.0 tidak didukung di 7.1, jadi Anda perlu memilih font bawaan 7.1 sebagai gantinya.

Apakah CSS kustom ikut terbawa jika saya berganti template?

Di situs versi 7.0, Squarespace menyatakan bahwa CSS kustom tidak ikut berpindah saat Anda berganti template. Simpan salinan CSS apa pun yang Anda tambahkan agar bisa menempelkannya kembali bila perlu.

Jawaban singkat: Di situs Squarespace 7.1, buka Site Styles, klik Fonts, lalu pilih font pack atau atur Headings, Paragraphs, Buttons, dan Miscellaneous satu per satu. Untuk memakai font yang tidak ada di pustaka, unggah file font Anda sendiri di panel yang sama. Gunakan CSS kustom hanya jika Anda perlu mengubah satu elemen tertentu.

Panduan ini membahas langkah untuk versi 7.1, sebagaimana dijelaskan di pusat bantuan Squarespace sendiri (dicek November 2026). Jika situs Anda masih versi 7.0, nama panelnya berbeda; lihat catatan versi di dekat bagian akhir.

Metode mana yang sebaiknya Anda pakai?

Pilih opsi paling ringan yang sudah memberi hasil sesuai keinginan. Semakin ke bawah di tabel, semakin banyak persiapan yang dibutuhkan.

Yang Anda inginkan	Metode terbaik	Usaha
Tampilan baru sepenuhnya dalam satu klik	Font pack di Site Styles	Rendah
Font berbeda untuk judul dan teks isi	Font per kategori di Site Styles	Rendah
Google Font tertentu	Pencarian di dropdown font	Rendah
Font merek yang lisensinya Anda miliki	Unggah file font	Sedang
Hanya satu judul, satu tombol, atau satu bagian	CSS kustom	Sedang hingga tinggi

Metode 1: Ganti font dengan font pack

Satu font pack mengatur font yang serasi untuk semua kategori teks sekaligus, sehingga ini cara tercepat untuk mengubah tampilan situs.

Buka editor dan klik Site Styles (ikon kuas).
Klik Fonts.
Pilih salah satu pack yang direkomendasikan, atau klik All Font Packs lalu filter berdasarkan sans-serif, serif, atau campuran.
Gulir halaman Anda untuk memeriksa judul, teks isi, dan tombol sebelum menutup panel.

Pack adalah awal yang bagus, tetapi bisa saja Anda menyukai font judulnya namun tidak font teks isinya. Itulah yang diatasi metode berikutnya.

Metode 2: Ganti font untuk satu kategori teks

Di bawah Fonts, Squarespace membagi teks menjadi empat kelompok. Masing-masing bisa diatur secara terpisah:

Headings: judul halaman dan gaya judul di blok teks Anda.
Paragraphs: teks isi.
Buttons: label tombol.
Miscellaneous: teks yang lebih kecil seperti keterangan gambar dan label formulir (cakupan persis kelompok ini berbeda-beda tergantung template, jadi periksa beberapa halaman setelah mengubahnya).

Untuk mengubah salah satunya:

Di Site Styles > Fonts, klik kategori yang Anda inginkan, misalnya Headings.
Buka dropdown font dan cari berdasarkan nama.
Pilih font, lalu sesuaikan pengaturan gaya, ketebalan, dan ukurannya sesuai kebutuhan.
Untuk Adobe Fonts, gunakan tautan Additional Fonts di bagian bawah daftar.

Squarespace juga memungkinkan Anda menetapkan ukuran dasar yang menjadi acuan skala teks lainnya. Jadi, jika semuanya terlihat terlalu besar atau terlalu kecil setelah mengganti font, sesuaikan ukuran dasar itu dulu sebelum mengubah ukuran tiap blok.

Tips praktis: ubah judul dan paragraf secara terpisah. Jika Anda mengubah keduanya sekaligus dan ada yang terlihat janggal, Anda tidak akan tahu mana penyebabnya. Untuk bantuan memilih pasangan font, lihat panduan kami tentang cara memilih font website.

Metode 3: Unggah font Anda sendiri

Jika merek Anda memakai font yang tidak ada di pustaka, unggah saja. Squarespace menyatakan bahwa Anda memerlukan izin dari pemilik atau pemberi lisensi font untuk memakainya dengan cara ini.

Siapkan file font dalam format OTF, TTF, WOFF, atau WOFF2. Pengunggah di Site Styles menerima keempatnya.
Buka Site Styles > Fonts, pilih kategori (atau dropdown font), lalu cari opsi unggah.
Seret file Anda ke panel font yang diunggah, atau klik ikon plus lalu pilih dari komputer Anda.
Pilih font yang sudah diunggah untuk kategori yang Anda inginkan.
Publikasikan, lalu lihat situs yang sudah live di desktop dan ponsel untuk memastikan font termuat.

Teks antarmuka kadang berubah, jadi jika ada tombol yang labelnya berbeda, cari ikon unggah atau ikon plus di dalam dropdown font.

Masalah umum saat mengunggah

Font muncul di daftar tetapi tampilannya aneh. File font mungkin tidak memiliki salah satu ketebalan atau gaya (bold, italic). Unggah setiap ketebalan yang ingin Anda pakai sebagai file tersendiri.
Font berfungsi di editor tetapi tidak muncul bagi pengunjung. Muat ulang paksa (hard refresh) halaman yang sudah dipublikasikan, dan periksa lisensi file font untuk penggunaan web.
Anda mengunggah file WOFF2 lalu mencoba memanggilnya dari area file CSS. Area Custom Files di editor CSS hanya mencantumkan TTF, OTF, dan WOFF sebagai jenis font, bukan WOFF2. Gunakan pengunggah Site Styles untuk WOFF2.

Metode 4: Atur satu elemen dengan CSS kustom

Site Styles mengubah font di seluruh situs berdasarkan kategori. Saat Anda butuh pengecualian, misalnya satu judul dengan font berbeda, CSS kustom bisa melakukannya. Panduan CSS dari Squarespace sendiri menyarankan agar CSS dibatasi pada font, warna, dan latar belakang, karena perubahan lain bisa merusak tata letak Anda.

Unggah font terlebih dahulu dengan Metode 3, atau pilih font dari pustaka, supaya font tersebut sudah tersedia di situs Anda.
Buka Website > Pages > Custom CSS (jalur persisnya bisa sedikit berbeda tergantung situs).
Tempel aturan seperti di bawah ini, lalu simpan.

```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }

/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```

Ganti "Your Font Name" dengan nama persis yang tampil di Site Styles. Font cadangan generik (serif atau sans-serif) menjaga teks tetap terbaca jika font gagal dimuat. Nama class bisa berbeda tergantung template dan pembaruan Squarespace, jadi gunakan inspector di browser Anda untuk memastikan selector elemen yang Anda tuju.

Jika Anda menerapkan CSS hanya pada satu halaman, pusat bantuan Squarespace menjelaskan opsi tingkat halaman untuk itu; pastikan langkah terbarunya di sana sebelum mengandalkannya.

Daftar periksa font sebelum Anda publikasikan

Salin daftar ini dan jalankan satu kali.

[ ] Judul dan teks isi memakai tidak lebih dari dua keluarga font.
[ ] Teks isi mudah dibaca di ponsel, bukan hanya di desktop.
[ ] Setiap ketebalan yang Anda pakai (regular, bold, italic) tersedia di font tersebut.
[ ] Anda memiliki lisensi untuk memakai font yang diunggah di web.
[ ] Tombol dan label formulir memakai font yang serasi dengan bagian halaman lainnya.
[ ] Anda menyimpan salinan CSS kustom yang Anda tambahkan.
[ ] Anda memeriksa situs yang sudah live, bukan hanya pratinjau di editor.

Versi 7.0 vs 7.1

Pusat bantuan Squarespace menyatakan bahwa opsi font 7.1 berlaku untuk situs 7.1 dan situs 7.0 memiliki pengaturan font sendiri. Di 7.0, perubahan font dilakukan lewat Site Styles di panel Design. Jika Anda mempertimbangkan untuk pindah, Squarespace punya alat pembaruan, dan ulasan Squarespace kami membahas perbandingan editor terbarunya. Jika font hanyalah satu dari beberapa hal yang membuat Anda frustrasi, halaman alternatif Squarespace memuat daftar builder lainnya, dan rincian biaya kami menunjukkan total biaya sebuah situs Squarespace.

Jika Anda memulai situs baru

Saat memilih template atau membangun situs dari nol, tentukan tipografinya terlebih dahulu. Itu lebih mudah daripada memperbaikinya belakangan. Paket gratis We.Inc memungkinkan Anda memublikasikan hingga tiga situs dari template siap pakai; AI builder yang menyusun draf situs dari sebuah prompt dimulai dari paket Starter seharga $20 per bulan. Anda bisa mendaftar di sini.

Mulai gratis · Tanpa kartu kredit

Umair Ali Sadaqat

Pendiri We.Inc

Umair adalah pendiri We.Inc. Ia menulis tentang pembuatan situs web dengan AI, agensi, dan bisnis menjalankan studio web.

Siap membuat sesuatu yang hebat?

Bergabunglah dengan 15,000+ bisnis yang memakai We.Inc untuk meluncurkan, berkembang, dan mengotomatiskan, semuanya dari satu platform.