Bagaimana cara menggunakan Google Font di Draw.io?

Apakah mungkin menggunakan Google Font ( https://www.google.com/fonts ) di Draw.io?

Walaupun draw.io tidak sepengetahuan saya mengizinkan impor font, saya ingin memposting apa yang cocok untuk saya. Anda harus menggunakan browser yang mampu ekstensi seperti Chrome atau Firefox (Saya menggunakan Chrome untuk tangkapan layar).

Untuk mulai mendapatkan ekstensi "Stylish" untuk browser Anda ( Chrome , Firefox ). Selanjutnya buka opsi ekstensi dan klik tombol "Tulis Gaya Baru".

Dari sini Anda akan membutuhkan:

• Masukkan nama untuk gaya Anda (saya menggunakan Draw IO, tetapi semuanya baik-baik saja).

• Masukkan url Google Font di kotak teks. Saya ingin mengimpor Ikon Bahan Google ke draw.io sehingga contoh saya menggunakan: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Catatan: Anda mungkin ingin mengatur "Keymap" (kiri bawah pada gambar) menjadi "dasar" jika belum. Ini membuat penyalinan / menempel lebih mudah.

  

• Pastikan "Berlaku untuk bidang" (Di bawah kotak teks) disetel ke "URL di domain" dan nilainya "draw.io". Ini akan memastikan impor diterapkan ke aplikasi web draw.io. Anda dapat menggunakan teknik yang sama ini untuk aplikasi web apa pun yang mendukung font khusus.

• Sekarang tekan tombol "Simpan" di bawah judul yang Anda atur semula. Ketika Anda membuka draw.io font akan diimpor dengan benar.
• Buka draw.io Anda dan klik pada bentuk.
• Di panel format Anda (panel default di sisi kanan) klik pada tab "Teks".
• Di bawah font drop down pilih "Custom" dan masukkan font Anda (Mine was "Material Icons") dan klik apply.
• Anda sekarang siap untuk memilih font ini.

Contoh dengan Font Icon:

Catatan tentang Ikon Font: Karena saya menggunakan Ikon Bahan dalam hal ini saya menggunakan nama ikon sebagai teks (ligatur font). Misalnya Untuk bintang saya memasukkan kotak teks, dan memasukkan "bintang" (per nama dari Halaman Ikon Bahan ) dan memastikan font diatur ke "Ikon Bahan". Untuk nama dengan spasi pastikan menggunakan garis bawah (mis. "Star_border").

Contoh dengan Font Teks: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

Saya agak mencoba panduan di atas tetapi tidak bisa membuatnya bekerja. Saya kemudian mengajukan pertanyaan pada halaman grup google draw.io, dan diberi tahu bahwa bidang khusus adalah untuk font yang dipasang secara lokal di sistem Anda.

Tuliskan yang berikut yang mungkin membantu orang lain yang menemukan posting ini melalui google:

• Temukan font yang Anda inginkan di Google Fonts
• Unduh zip font
• Ikuti https://www.google.com/get/noto/help/install/ tentang cara memasang font di sistem Anda
• Mulai ulang Chrome atau browser pilihan Anda (agar font dapat dimuat).

Klik pada bidang font Kustom, dan tulis nama font yang telah Anda instal (Tidak perlu menuliskannya dalam tanda kutip atau garis bawah dll).

Lihat contoh yang saya lampirkan di https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

Stumbled atas ini saat menghadapi kesulitan untuk menambahkan Custom Font (khusus Google Font) ke draw.io (versi desktop). Ternyata saya menggunakan 12.1.7 - yang memiliki cara yang kurang sederhana untuk menambahkan font khusus.

Menemukan tautan berikut setelah pencarian google - posting tertanggal 2 Des 2019 - tetapi tidak disebutkan versi di dalamnya. Diperiksa untuk peningkatan dan ditingkatkan draw.io ke 13.0.1, begitulah:

https://drawio-app.com/external-fonts-in-draw-io/

Ini adalah permintaan fitur di GitHub: https://github.com/jgraph/drawio/issues/577

Saya belum dapat menemukan cara untuk menggunakan beberapa font Google yang lebih baru, tetapi Anda dapat menggunakan beberapa yang lebih umum / populer dengan memilih "custom" di bawah bagian font, dan mengetik nama font ( mis. "Avenir Next", "Oswald", dll) dan kemudian akan menggunakan font itu. Sisi baiknya, tampaknya juga mengenali font populer tertentu yang tidak pada font Google dan akan mahal untuk membeli (misalnya Myriad Pro).

Anda dapat menambahkan tautan lengkap, jadi alih-alih hanya mengetik 'Heebo' di bidang khusus, Anda dapat mengetik <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Ini masih berfungsi sedikit bermasalah ketika mengubah font setelahnya, tapi itu membuat saya lebih lanjut.

Atau .. buka saja tab 'gaya' dan klik gaya 'edit'. Tambahkan tautan di atas dan ubah font-family.