Bagaimana cara menggunakan font .woff untuk situs web saya?

Di mana Anda menempatkan font agar CSS dapat mengaksesnya?

Saya menggunakan font non-standar untuk browser dalam file .woff. Katakanlah 'font-mengagumkan' disimpan dalam file 'font-mengagumkan.woff'.

Setelah pembuatan file woff, Anda harus menentukan font-family, yang nantinya dapat digunakan di semua gaya css Anda. Di bawah ini adalah kode untuk mendefinisikan keluarga font (untuk jenis huruf normal, tebal, miring-miring, miring). Diasumsikan, bahwa ada 4 file * .woff (untuk tipografi yang disebutkan), ditempatkan di fontssubdirektori.

Dalam kode CSS:

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-bold.woff") format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

Setelah memiliki definisi tersebut, Anda tinggal menulis, misalnya,

Dalam kode HTML:

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

Dalam kode CSS:

.mydiv {
    font-family: myfont
}

Alat yang baik untuk membuat file woff, yang dapat disertakan dalam lembar gaya CSS ada di sini . Tidak semua file woff berfungsi dengan baik pada versi Firefox terbaru, dan generator ini menghasilkan font yang 'benar'.

Anda perlu mendeklarasikan @font-faceseperti ini di stylesheet Anda

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

Sekarang jika Anda ingin menerapkan font ini ke paragraf cukup gunakan seperti ini ..

p {
font-family: 'Awesome-Font', Arial;
}

Referensi Lainnya