Rumah Media Sosial Bagaimana Menggunakan Font Kustom dari Situs Font Google Web di Dreamweaver - dummies

Bagaimana Menggunakan Font Kustom dari Situs Font Google Web di Dreamweaver - dummies

Video: Memperbesar / Memperkecil Ukuran Fonts di HTML & CSS 2024

Video: Memperbesar / Memperkecil Ukuran Fonts di HTML & CSS 2024
Anonim

Salah satu cara termudah untuk menggunakan Dreamweaver untuk menambahkan font khusus ke situs Anda ditawarkan oleh Google. Google Web Font menawarkan koleksi font yang terbatas namun Anda bisa menggunakan semua font mereka secara gratis. Ikuti langkah-langkah ini untuk menambahkan salah satu font dari situs Google Web Fonts ke halaman Anda:

  1. Buka browser web dan kunjungi situs Font Web Google .

  2. Cari melalui font yang tersedia di situs dengan memilih jenis dan gaya font yang Anda cari.

    Untuk mempersempit pencarian Anda, gunakan Filter (di kolom kiri). Anda dapat mengubah teks yang ditampilkan di setiap font dengan mengedit bidang Teks Pratinjau di bagian atas layar.

  3. Temukan font yang Anda suka, lalu klik tombol Add to Collection biru di kanan bawah, tepat di bawah setiap nama font.

  4. Klik kotak centang di sebelah masing-masing gaya font yang ingin Anda gunakan di halaman web Anda.

    Kebanyakan font dalam Direktori Font Google hanya memiliki satu gaya. Meskipun Anda mungkin tergoda untuk memilih semua gaya, yang terbaik adalah memilih hanya yang akan Anda gunakan. Seperti yang Google peringatkan, semakin banyak gaya font yang Anda pilih, semakin lama waktu yang dibutuhkan untuk mendownload halaman web Anda.

  5. Gulir ke bawah halaman dan pilih opsi Latin (untuk bahasa Inggris).

    Jika Anda memerlukan karakter tambahan untuk bahasa lain, pilih opsi Latin Extended.

  6. Gulir ke bawah halaman ke kotak biru dengan tiga tab; klik tab pertama untuk menautkan font ke situs web Anda.

    Google menyediakan tiga pilihan: Standard, @import, dan JavaScript. Anda menemukan deskripsi rinci ketiganya di situs Google.

  7. 7. Salin tautan dari kolom tab Standar di Google seperti Anda akan menyalin teks atau kode lain dari halaman web.

  8. Di Dreamweaver, tempelkan tautan ke bagian kepala halaman web Anda di antara tag yang terbuka dan tutup.

  9. Kembali ke situs Font Google web dan di bagian bawah halaman, salin nama keluarga font.

    Anda dapat menemukan nama keluarga font dalam Mengintegrasikan Font ke dalam area CSS Anda.

    Dalam definisi gaya Anda, Anda harus menyertakan nama font persis seperti yang ditulis oleh Google. Copy-and-paste adalah cara terbaik untuk memastikan nama font cocok.

  10. Di Dreamweaver, sisipkan nama keluarga font ke dalam aturan CSS di mana Anda ingin menggunakan font.

  11. Terapkan aturan untuk teks di halaman web Anda.

    Jika Anda menggunakan font dalam gaya pemilih Tag, seperti tag

    , bila Anda menerapkan tag ke teks, font akan secara otomatis diterapkan sebagai bagian dari aturan. Jika Anda menggunakan font dalam gaya kelas atau ID, gaya itu kemudian harus diterapkan ke tag yang mengelilingi teks, seperti tag

    atau tag.

  12. Publikasikan halaman ke server web dan kemudian melihat pratinjau halaman di browser web untuk melihat fontnya.

    Perhatikan bahwa ketika Anda menggunakan font Web Google Anda mungkin tidak melihat font yang ditampilkan di Dreamweaver, meskipun Anda menggunakan opsi Live view. Untuk memastikan bahwa font bekerja pada halaman Anda, Anda mungkin perlu mentransfer halaman ke server web menggunakan FTP dan melihat pratinjau halaman setelah dipublikasikan secara online.

Bagaimana Menggunakan Font Kustom dari Situs Font Google Web di Dreamweaver - dummies

Pilihan Editor

Cara membuat pengeditan dasar pada gambar di Word 2013 - dummies

Cara membuat pengeditan dasar pada gambar di Word 2013 - dummies

Gambar asli Anda Masukkan dokumen Word hanyalah titik awal; Anda dapat memodifikasi gambar itu dengan berbagai cara untuk menciptakan efek khusus dan memperbaiki penampilan gambar. Misalnya, Anda dapat menyesuaikan kecerahan gambar dan kontrasnya, menerapkan pencucian warna ke dalamnya, dan / atau menerapkan efek artistik ke ...

Bagaimana membuat daftar dengan peluru dan angka di Word 2013 - dummies

Bagaimana membuat daftar dengan peluru dan angka di Word 2013 - dummies

Kapanpun Anda memiliki lebih dari dua hal yang ingin dijelaskan dalam dokumen Word 2013 Anda, pertimbangkan untuk membuat daftar. Untuk menarik perhatian pada daftar seperti itu, untuk memanggilnya dari teks Anda yang lain, Anda dapat mencoba indentasi gantung, membuat beberapa kata pertama menjadi berani, atau memanfaatkan peluru dan garis Firman ...

Bagaimana menggabungkan dan membagi sel tabel di Word 2007 - dummies

Bagaimana menggabungkan dan membagi sel tabel di Word 2007 - dummies

Anda dapat menggabungkan dan membagi sel di tabel Word 2007 Anda. Anda dapat menggabungkan dua atau lebih sel dalam sebuah tabel dengan hanya menghapus baris yang memisahkannya. Untuk membagi satu sel menjadi dua, Anda cukup menggambar garis, horizontal atau vertikal, melalui sel. Menggabungkan sel di tabel Word 2007 Anda Klik ...

Pilihan Editor

Adalah Codependency a Addiction? Penyakit? - dummies

Adalah Codependency a Addiction? Penyakit? - dummies

Bahwa kodependensi adalah penyakit yang pertama kali disarankan pada tahun 1988 oleh psikiater Timmen Cermak. Penyakit mungkin terdengar mengerikan, tapi itu hanya berarti suatu kondisi dengan gejala progresif dan progresif yang mengganggu fungsi normal. Alkoholisme disebut sebagai penyakit oleh American Medical Association (AMA) pada tahun 1956. Pada tahun 1991, AMA mengkategorikannya sebagai penyakit bersama ...

Tahap akhir Codependency and Recovery - dummies

Tahap akhir Codependency and Recovery - dummies

Pada tahap akhir kodependensi dan pemulihan, kontras antara penyakit dan kesehatan paling terasa. Dunia kodependen yang tidak diobati telah menyempit secara signifikan, dan tingkat kesehatan dan fungsinya telah menurun drastis, sementara dunia kodependen yang telah pulih telah diperluas untuk mencakup pengambilan risiko, hubungan, dan tujuan baru yang lebih besar. Proses penyakit pada ...

Pilihan Editor

Bagaimana cara Capture QuickBooks Rights Settings - dummies

Bagaimana cara Capture QuickBooks Rights Settings - dummies

QuickBooks membuat hidup Anda lebih mudah dengan memberi Anda dan akuntan Anda semua yang Anda butuhkan untuk menjaga agar tetap teratur. Namun, kadang-kadang solusi adalah dalam rangka. Akuntan sering ingin melihat hak yang dimiliki pengguna tertentu, terutama jika mereka mengaudit Anda sebagai bagian dari penutupan tahunan. (Anda mungkin diaudit jika bank menginginkan ...

Bagaimana Mengubah Hak Pengguna di QuickBooks Pro dan Premier - dummies

Bagaimana Mengubah Hak Pengguna di QuickBooks Pro dan Premier - dummies

Anda dapat memodifikasi hak yang Anda berikan kepada pengguna di QuickBooks Pro atau Premier. Untuk melakukan ini, pilih Company → Set Up Users and Passwords → Set Up Users untuk menampilkan kotak dialog User List. Untuk melihat hak yang dimiliki pengguna tertentu, pilih pengguna dalam daftar dan klik View ...

Mengubah Hak Pengguna di Solusi Perusahaan QuickBooks 2012 - dummies

Mengubah Hak Pengguna di Solusi Perusahaan QuickBooks 2012 - dummies

Di Solusi Perusahaan QuickBooks, Anda juga dapat memodifikasi hak yang Anda berikan kepada pengguna. Untuk melakukannya, pilih perintah Perusahaan → Pengguna → Atur Pengguna dan Peran untuk menampilkan kotak dialog Pengguna dan Peran, seperti yang ditunjukkan di bawah ini. Untuk mengubah hak pengguna setelah meninjaunya, pilih pengguna dan klik tombol Edit. Ini ...