Bagaimana saya bisa menggunakan font Roboto Google di situs web?

164

Saya ingin menggunakan font Roboto Google di situs web saya dan saya mengikuti tutorial ini:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Saya telah mengunduh file yang memiliki struktur folder seperti ini:

masukkan deskripsi gambar di sini

Sekarang saya punya tiga pertanyaan:

  1. Saya memiliki css di media/css/main.cssurl saya . Jadi di mana saya harus meletakkan folder itu?
  2. Apakah saya perlu mengekstrak semua eot, svg dll dari semua sub folder dan memasukkannya ke dalam fontsfolder?
  3. Apakah saya perlu membuat file css fonts.css dan memasukkan dalam file template dasar saya?

Contoh dia menggunakan ini

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Seperti apa url saya, jika saya ingin memiliki struktur dir seperti:

/media/fonts/roboto

html css fonts pengguna26
sumber

Jawaban:

258

Anda tidak perlu melakukan semua ini.

  • Buka halaman Google Web Fonts
  • cari Robotodi kotak pencarian di kanan atas
  • Pilih varian font yang ingin Anda gunakan
  • klik 'Pilih Font Ini' di bagian atas dan pilih timbangan dan karakter yang Anda butuhkan.

Halaman ini akan memberi Anda <link>elemen untuk dimasukkan dalam halaman Anda, dan daftar font-familyaturan sampel untuk digunakan dalam CSS Anda.

Menggunakan font Google dengan cara ini menjamin ketersediaan, dan mengurangi bandwidth ke server Anda sendiri.

Sunil Garg
sumber
Terima kasih untuk itu, itu sempurna. Apakah Anda tahu pengaturan mana yang digunakan Google untuk daftar putar mereka di google play store. Saya ingin memiliki gaya persis seperti itu. Juga saya tidak menemukan tautan atau cuplikan kode di tautan. saya melihat font di sana tetapi tidak ada kode
user26
3
Yang keren, mereka menyediakan @import untuk file KURANG juga! Namun, menguji tanpa koneksi internet ATAU masalah koneksi Google (misalnya: China) = TIDAK Font ... Saya juga memperhatikan bahwa tidak ada Roboto Black (Roboto Bk) font-family: mereka sebenarnya hanya menggunakan 3 keluarga font (Roboto, Roboto Condensed dan Roboto Slab) semua varian Roboto lainnya dibuat font-styledan font-weightperubahan CSS. Jadi idealnya, setelah menempatkan Google <link>memeriksa apakah font benar-benar ada. Jika tidak, gunakan milik Anda sendiri (btw memuat semua file dari satu kelompok font biasanya tidak melebihi 0,5 MB).
Armfoot
7
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>Ini memuat semua gaya hanya dari satu font-family: Roboto. Namun, jika Anda memerlukan keluarga font yang tidak ada di Google Fonts (seperti Roboto Black ), Anda memerlukan file pada folder Anda dan salin kode contoh yang telah Anda perlihatkan kepada kami dalam pertanyaan Anda ke main.css Anda (seperti ini @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.atau seperti yang saya sarankan di Jawabanku).
Armfoot
14
-1 untuk Using Google's fonts this way guaranties availability. Tidak ada yang "menjamin ketersediaan," apalagi font Google. Saya kebetulan adalah satu dari satu miliar + orang yang menggunakan CDN Google berarti banyak situs web gagal memuat dengan benar, atau sama sekali. Saya tidak memberi tahu siapa pun apa yang harus dilakukan, tetapi jangan berpikir CDN Google adalah solusi yang sempurna.
Nateowami
1
-1. Seperti yang disebutkan @Nateowami, Anda mengandalkan server Google (yang mungkin diblokir di negara-negara tertentu), itu buruk untuk privasi , dan kinerja sebenarnya bisa lebih baik jika Anda meng-host font Anda sendiri pada CDN. Ini lebih banyak pekerjaan tetapi itu pekerjaan Anda, bukan?
Robin Métral
70

Ada DUA pendekatan yang dapat Anda lakukan untuk menggunakan font web berlisensi pada halaman Anda:

  1. Layanan Hosting Font seperti Typekit, Fonts.com, Fontdeck, dll., Menyediakan antarmuka yang mudah bagi desainer untuk mengelola font yang dibeli, dan menghasilkan tautan ke CSS dinamis atau file JavaScript yang menyajikan font. Google bahkan menyediakan layanan ini secara gratis ( berikut adalah contoh untuk font Roboto yang Anda minta). Typekit adalah satu-satunya layanan untuk memberikan petunjuk font tambahan untuk memastikan font menempati piksel yang sama di seluruh browser.

    Pemuat font JS seperti yang digunakan oleh Google dan Typekit (mis. WebFont loader) menyediakan kelas dan panggilan balik CSS untuk membantu mengelola FOUT yang mungkin terjadi, atau waktu tunggu respons saat mengunduh font.

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. Pendekatan DIY melibatkan mendapatkan font yang dilisensikan untuk penggunaan web, dan (opsional) menggunakan alat seperti generator FontSquirrel (atau beberapa perangkat lunak) untuk mengoptimalkan ukuran file-nya. Kemudian, implementasi lintas-browser dari @font-faceproperti CSS standar digunakan untuk mengaktifkan font (s).

    Pendekatan ini dapat memberikan kinerja pemuatan yang lebih baik karena Anda memiliki kontrol yang lebih terperinci atas karakter untuk dimasukkan dan karenanya ukuran file.

    /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

Singkat cerita:

Menggunakan layanan hosting font bersama dengan deklarasi @ font-face memberikan hasil terbaik sehubungan dengan kinerja, kompatibilitas, dan ketersediaan keseluruhan.

Sumber: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

MEMPERBARUI

Roboto: Font tanda tangan Google sekarang open source

Sekarang Anda dapat membuat font Roboto secara manual menggunakan instruksi yang dapat ditemukan di sini .

Ashesh Kumar Singh
sumber
17

Posting lama, saya tahu.

Ini juga dimungkinkan menggunakan CSS @import url :

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
rocksteady
sumber
8
Solusi Anda adalah anti-pola kinerja. Menggunakan tag tautan dalam hasil markup Anda akan lebih cepat mengunduh file CSS Google dibandingkan dengan @import; browser hanya menemukan referensi sumber daya sebelumnya secara umum dan khususnya karena pra-loader (saat mengurai HTML vs pertama mengurai HTML, kemudian menemukan file CSS Anda, kemudian mengunduhnya, lalu mengurai dan menemukan @import, lalu unduh stylesheet yang diimpor).
Radko Dinev
3
Belum tentu. Menggunakan Webpack dan plugins, ini semua akan tertanam dalam distribusi Anda.
Spock
5

The srcmengacu langsung ke file font, oleh karena itu jika Anda menempatkan mereka semua di/media/fonts/roboto Anda harus merujuk kepada mereka dalam main.css Anda seperti ini: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

The ..berjalan satu folder up, yang berarti Anda mengacu pada mediafolder jika main.css berada dalam /media/cssfolder.

Anda harus menggunakan ../fonts/roboto/semua referensi url di CSS (dan pastikan file ada di folder ini dan bukan di subdirektori, sepertiroboto_black_macroman ).

Pada dasarnya (menjawab pertanyaan Anda):

Saya memiliki css di url media / css / main.css saya. Jadi di mana saya harus meletakkan folder itu

Anda bisa membiarkannya di sana, tetapi pastikan untuk menggunakannya src: url('../fonts/roboto/

Apakah saya perlu mengekstrak semua eot, svg dll dari semua sub folder dan memasukkannya ke dalam folder font

Jika Anda ingin merujuk ke file-file itu secara langsung (tanpa menempatkan subdirektori dalam kode CSS Anda), maka ya.

Apakah saya perlu membuat file css fonts.css dan memasukkan dalam file template dasar saya

Tidak harus, Anda bisa memasukkan kode itu ke main.css Anda. Tapi itu praktik yang baik untuk memisahkan font dari CSS khusus Anda.

Berikut adalah contoh file font KURANG / CSS yang saya gunakan:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(Dalam contoh ini saya hanya menggunakan ttf) Kemudian saya gunakan @import "fonts";di file main.less saya ( less adalah preprocessor CSS, itu membuat hal-hal seperti ini sedikit lebih mudah )

Lengan
sumber
2

Inilah yang saya lakukan untuk mendapatkan file woff2 yang saya inginkan untuk penyebaran statis tanpa harus menggunakan CDN

TEMPORARILY tambahkan cdn untuk css untuk memuat font roboto ke index.html dan biarkan halaman memuat. dari google dev tools lihat sumber dan perluas simpul fonts.googleapis.com dan lihat konten css? family = Roboto: 300.400.500 & display = tukar file dan salin kontennya. Tempatkan konten ini dalam file css di direktori aset Anda.

Dalam file css, hapus semua barang Yunani, cryllic dan Vietnam.

Lihatlah baris-baris dalam file css ini yang mirip dengan:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

salin alamat tautan dan tempel di peramban Anda, itu akan mengunduh font. Masukkan font ini ke folder aset Anda dan ganti nama di sini, serta di file css. Lakukan ini ke tautan lain, saya punya 6 file unik woff2.

Saya mengikuti langkah yang sama untuk ikon materi.

Sekarang kembali dan komentari baris tempat Anda memanggil cdn dan alih-alih gunakan gunakan file css baru yang Anda buat.

Helzgate
sumber
1

Coba ini

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
Pengembang Pimpinan
sumber
1

Gunakan / fonts / atau / font / sebelum nama jenis font di stylesheet CSS Anda. Saya menghadapi kesalahan ini tetapi setelah itu berfungsi dengan baik.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
Mohammed Javed
sumber
1

Untuk Situs Web Anda dapat menggunakan font 'Roboto' seperti di bawah ini:

Jika Anda telah membuat file css terpisah maka letakkan di bawah baris di bagian atas file css sebagai:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Atau jika Anda tidak ingin membuat file terpisah, tambahkan baris di atas di antaranya <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

kemudian:

html, body {
    font-family: 'Roboto', sans-serif;
}
Tn. Tidak ada
sumber
0

Apakah Anda membaca How_To_Use_Webfonts.html yang ada di file zip itu?

Setelah membaca itu, tampaknya setiap subfolder font memiliki .css di sana yang dapat Anda gunakan dengan memasukkan ini:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Barry Colebank Jr
sumber
0

mudah

setiap folder yang Anda unduh memiliki jenis font roboto yang berbeda, artinya mereka adalah font yang berbeda

contoh: "roboto_regular_macroman"

untuk menggunakan salah satu dari mereka:

1- ekstrak folder font yang ingin Anda gunakan

2- unggah di dekat file css

3 - sekarang memasukkannya dalam file css

contoh untuk memasukkan font yang disebut "roboto_regular_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

perhatikan path file, di sini saya mengunggah folder yang disebut "roboto_regular_macroman" di folder yang sama di mana css berada

maka sekarang Anda cukup menggunakan font dengan mengetik font-family: 'Roboto';

Omar Moustafa
sumber
0

Ini sebenarnya cukup sederhana. Buka font di situs web Google, dan tambahkan tautannya ke kepala setiap halaman yang ingin Anda sertakan font.


sumber
0

Menghabiskan satu jam, memperbaiki masalah font.

Jawaban terkait - Di bawah ini untuk React.jssitus web:

  1. Pasang modul npm:

    npm install --save typeface-roboto-mono

  2. impor file .js yang ingin Anda gunakan
    di bawah ini :

    import "typeface-roboto-mono"; // jika impor didukung
    require('typeface-roboto-mono') // jika impor tidak didukung

  3. Untuk elemen Anda dapat menggunakan
    salah satu di bawah ini:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Semoga itu bisa membantu.

Manohar Reddy Poreddy
sumber