Cara Menambahkan Font Kustom ke Squarespace Seperti Pro

Ingin menambahkan font khusus ke Squarespace?

Jika Anda pengguna Squarespace, Anda sudah tahu bahwa platform ini hadir dengan beberapa opsi font yang solid. Tetapi ada banyak alasan untuk menambahkan font ke situs web Squarespace!

Biasanya, itu adalah font merek, atau bahkan yang dipesan lebih dahulu yang telah Anda buat.

Mungkin ini lebih tentang tampilan tertentu yang ingin Anda buat untuk elemen dalam situs web Anda.

Apa pun alasannya, mudah untuk menambahkan font khusus ke Squarespace – cukup ikuti proses ini!

Bagaimana cara menambahkan font khusus ke situs web Squarespace Anda

Menambahkan font yang Anda pilih ke situs web Squarespace Anda cukup sederhana, tetapi ada sedikit CSS untuk ditambahkan.

Pastikan Anda baik-baik saja dengan melakukan itu sebelum Anda mulai, atau ambil seseorang yang melakukannya.

Langkah 1. Pilih font Anda

Jika Anda sudah memilih font yang ingin Anda gunakan, lewati ke langkah berikutnya. Jika tidak, pastikan Anda memilih font yang dapat Anda gunakan secara legal di blog Anda.

Ada banyak tempat untuk menemukan font gratis dan berbayar, seperti Pasar Kreatif. Tetapi periksa lisensi sebelum Anda menambahkannya ke situs web Anda.

Langkah 2. Siapkan file font web Anda

Untuk menambahkan font ke situs web, Anda memerlukan tiga format file font:

1. .ttf atau .otf
2. .woff
3. .woff2

Terkadang Anda mungkin memiliki jenis file font web dan jika Anda memilikinya, lewati langkah ini. Anda dapat menggunakan hanya itu.

Jika tidak, siapkan ketiga jenis file untuk ditambahkan.

Langkah 3. Unggah file font Anda ke Squarespace

Buka Desain> CSS Kustom> Kelola File Kustom

Di sini Anda akan menambahkan font melalui tombol unggah.

Ulangi ini untuk ketiga file, atau untuk file font web jika itu yang Anda miliki.

Langkah 4. Beri nama font khusus Anda di Squarespace

Setelah font diunggah, Anda perlu memberi tahu Squarespace di mana dan apa itu dengan Editor CSS.

Gunakan kode berikut:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Ambil ini dan tambahkan informasi yang relevan untuk font Anda:

• Nama font: ganti ini dengan nama font Anda berdasarkan nama file atau sesuatu yang akan Anda ingat.
• URL font: ganti ini dengan URL font yang baru saja Anda unggah. Ambil URL dari area unggahan Anda (dengan cara yang sama seperti yang Anda lakukan untuk URL gambar) dan tambahkan ini di tempatnya.

Langkah 5. Tentukan di mana & bagaimana font kustom harus digunakan

Terakhir, Anda hanya perlu memberi tahu Squarespace tempat menggunakan font yang berbeda di situs web Anda.

Ini bisa di tempat-tempat seperti tajuk atau tajuk situs, tombol, atau bahkan sesuatu seperti blok buletin.

Cara menggunakan font Anda di tempat umum

Setelah Anda mengunggah font Anda, Anda dapat mulai memberikan informasi spesifik kepada Squarespace tentang di mana menggunakannya.

Berikut adalah beberapa contoh populer dan bagaimana melakukannya.

Cara Mengubah Font Tajuk Situs

Header situs adalah area di bagian atas bilah navigasi.

Anda mungkin memiliki banyak tautan di sini, logo teks, dan mungkin pengumuman.

Font dari semua ini dapat diubah menggunakan cuplikan CSS berikut:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Ingatlah untuk mengganti YOURNAME dengan nama font Anda.

Cara Mengubah Font Tombol

Tempat populer lainnya untuk menggunakan font khusus adalah pada tombol situs web Anda.

Ada tiga blok tombol: Kecil, Sedang, dan Besar. Anda dapat mengubah salah satu atau semuanya dengan kode berikut:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Ingatlah untuk mengganti YOURNAME dengan nama font Anda.

Sematkan ke Pinterest agar Anda dapat kembali lagi nanti!

(Lebih banyak tip font khusus dan pemecahan masalah setelah grafik).

Cara Mengubah Font Blok Buletin

Blok Newsletter memungkinkan orang untuk mendaftar ke daftar email Anda. Banyak orang menggunakan plugin yang berbeda untuk ini.

Tetapi jika Anda menggunakan blok di dalam Squarespace, kode berikut akan memungkinkan Anda menambahkan font khusus.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Ingatlah untuk mengganti YOURNAME dengan nama font Anda.

Cara Mengubah Font Posting Blog

Salah satu hal paling populer untuk dilakukan dengan font adalah menggunakannya untuk posting blog.

Anda perlu mempertimbangkan judul halaman, deskripsi dan judul posting pada halaman artikel saat melakukan ini.

Anda mungkin ingin semuanya sama.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Ingatlah untuk mengganti YOURNAME dengan nama font Anda.

Cara Mengubah Font Blok Kutipan

Contoh terakhir adalah mengubah Blok Kutipan ke font yang berbeda.

Ini digunakan untuk kutipan dalam posting tetapi juga hal-hal seperti testimonial atau ulasan pelanggan.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Ingatlah untuk mengganti YOURNAME dengan nama font Anda.

Anda mungkin juga menyukai panduan ukuran gambar Squarespace saya.

Masalah font khusus

Menambahkan font adalah pekerjaan mudah setelah Anda menguasai sedikit CSS. Tetapi ada beberapa kesalahan umum yang dilaporkan.

Pesan "Font Tidak Didukung" dalam gaya situs

Terkadang, Anda mungkin melihat pesan 'font tidak didukung' di situs Anda. Ini terjadi ketika Font Adobe digunakan dan kemudian Adobe menghentikannya.

Sebagian besar waktu, Squarespace akan menggantikannya dengan alternatif terdekat. Tetapi jika tidak, Anda mungkin perlu mengunggah font lain untuk menggantinya.

Font saya terlihat berbeda ketika saya masuk

Terkadang orang melihat font mereka terlihat berbeda saat masuk dan saat melihat situs langsung. Biasanya, ini karena pembaca font dan cara mereka melihat situs.

Jika Anda melihat ini, hubungi dukungan Squarespace dan mereka dapat melihat pengaturan untuk melihat apa yang perlu disesuaikan.

Saya tidak dapat mengatur font saya ke ukuran tertentu

Masalah dengan pengaturan ukuran tertentu untuk font biasanya berkaitan dengan backend situs web Anda. Bisa jadi karena versi Squarespace yang Anda gunakan.

Jadi, hubungi dukungan untuk mendapatkan bantuan mereka tentang apa yang mungkin salah.

Tambahkan font khusus Anda ke Squarespace

Dengan sentuhan CSS, Anda dapat dengan cepat menambahkan file font khusus ke Squarespace.

Anda dapat menggunakannya di tempat yang berbeda dengan sedikit kode dan menyesuaikan semuanya mulai dari ukuran hingga spasi huruf.

Editor Gaya memudahkan untuk menyesuaikan situs web Anda di luar opsi font bawaan.

Jadi bagaimana Anda bisa menggunakan font khusus untuk membuat situs web Anda terlihat lebih pintar?