Menggunakan font khusus menggunakan CSS?

Saya telah melihat beberapa situs web baru yang menggunakan font khusus di situs mereka (selain Arial, Tahoma, dll.) Biasa.

Dan mereka mendukung jumlah browser yang bagus.

Bagaimana seseorang melakukan itu? Sementara juga mencegah orang dari memiliki akses gratis untuk mengunduh font, jika memungkinkan.

Secara umum, Anda dapat menggunakan font khusus @font-facedalam CSS Anda. Berikut ini contoh yang sangat mendasar:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Kemudian, sepele, untuk menggunakan font pada elemen tertentu:

.classname {
    font-family: 'YourFontName';
}

( .classnameadalah pemilih Anda).

Perhatikan bahwa format font tertentu tidak berfungsi pada semua browser; Anda dapat menggunakan generator fontsquirrel.com untuk menghindari terlalu banyak upaya konversi.

Anda dapat menemukan serangkaian font web gratis yang disediakan oleh Google Fonts (juga memiliki @font-faceaturan CSS yang dibuat secara otomatis , jadi Anda tidak perlu menulis sendiri).

sementara juga mencegah orang dari memiliki akses gratis untuk mengunduh font, jika memungkinkan

Tidak, itu tidak mungkin untuk menata teks Anda dengan font khusus yang disematkan melalui CSS, sambil mencegah orang dari mengunduhnya. Anda perlu menggunakan gambar, Flash, atau Kanvas HTML5 , yang semuanya tidak terlalu praktis.

Saya harap itu membantu!

Untuk memastikan font Anda kompatibel lintas-browser, pastikan Anda menggunakan sintaks ini:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Diambil dari sini .

Anda harus mengunduh file font dan memuatnya dalam CSS Anda.

Fe Saya menggunakan font Yanone Kaffeesatz di Aplikasi Web saya.

Saya memuat dan menggunakannya via

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

di stylesheet saya.

Hari ini ada empat format wadah font yang digunakan di web: EOT, TTF, WOFF,danWOFF2.

Sayangnya, terlepas dari berbagai pilihan, tidak ada satu format universal yang berfungsi di semua browser lama dan baru:

• EOT hanya untuk IE,
• TTF memiliki dukungan IE parsial,
• WOFF menikmati dukungan terluas tetapi tidak tersedia di beberapa browser lama
• Dukungan WOFF 2.0 sedang dalam proses untuk banyak browser.

Jika Anda ingin aplikasi web Anda memiliki font yang sama di semua browser maka Anda mungkin ingin memberikan semua 4 jenis font dalam CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Jika Anda tidak menemukan font apa pun yang Anda suka dari Google.com/webfonts atau fontsquirrel.com, Anda selalu dapat membuat font web sendiri dengan font yang Anda buat.

ini tutorial yang bagus: Buat kit wajah web font font Anda sendiri

Meskipun saya tidak yakin tentang mencegah seseorang mengunduh font Anda.

Semoga ini membantu,

ada juga alat menarik yang disebut CUFON . Ada demonstrasi cara menggunakannya di blog ini. Sangat sederhana dan menarik. Juga, itu tidak memungkinkan orang untuk ctrl + c / ctrl + v konten yang dihasilkan.

Saya sedang mengerjakan Win 8, gunakan kode ini. Ini berfungsi untuk IE dan FF, Opera, dll. Apa yang saya pahami adalah: font woff ringan dan umum pada font Google.

Buka di sini untuk mengkonversi font ttf Anda ke woff sebelumnya.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Pertama-tama, Anda tidak dapat mencegah orang mengunduh font kecuali jika itu milik Anda dan itu biasanya memakan waktu berbulan-bulan. Dan tidak masuk akal untuk mencegah orang menggunakan font. Banyak font yang Anda lihat di situs web dapat ditemukan di platform gratis seperti yang saya sebutkan di bawah ini.

Tetapi jika Anda ingin menerapkan font ke situs web Anda baca ini: Ada cara yang cukup sederhana dan gratis untuk mengimplementasikan font ke situs web Anda. Saya akan merekomendasikan font Google karena gratis dan mudah digunakan. Misalnya, saya akan menggunakan font Bangers dari Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Begini tampilannya: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}