在網頁中，我們可以用CSS的font-family屬性來定義字型，然而定義的字型在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人網站使用了非常漂亮的字型，而這些字型通常在使用者的電腦中是沒有安裝的，所以用font-family屬性就無法實現了。

字型應用是網頁設計中不可或缺的一部分。經常地，我們盼望在網頁中應用某一特定字型，但是該字型並非主流作業系統的內建字型，這樣使用者在涉獵頁面的時候就 有可能看不到真實的設計。美工設計師最常做的措施是把想要字型應用是網頁設計中不可或缺的一部分。經常地，我們盼望在網頁中應用某一特定字型，但是該字型並非主流作業系統的內建字型，這樣使用者在涉獵頁面的時候就 有可能看不到真實的設計。美工設計師最常做的措施是把想要的文字做成圖片，這樣做有幾個明顯 缺點：1. 不可能大領域的應用該字型；2. 圖片內容相對應用文字不易修正；3. 不利於網站

CSS3 @font-face

說@font-face是CSS3的新特性並不準確，因為CSS2就已經支援了這一特性，並且Internet Explorer早在第5版的時候就已經支援它了，不過IE實現方式是通過自有的eot(Embeded Open Type)字型格式，其它瀏覽器都不支援這個格式。@font-face支援如下屬性：

font-family：設定文字的字型名稱。
font-style：設定文字樣式。
font-variant：設定文字是否大小寫。
font-weight：設定文字的粗細。
font-stretch：設定文字是否橫向的拉伸變形。
font-size：設定文字字型大小。
src：設定自定義字型的相對路徑或者絕對路徑。

示例程式碼：

body {font-family:'微軟雅黑'}
 
@font-face {
font-family:微軟雅黑;
src: url('微軟雅黑.eot'); /* IE9 Compat Modes */
src: url('微軟雅黑.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('微軟雅黑.woff') format('woff'), /* Modern Browsers */
url('微軟雅黑.ttf') format('truetype'), /* Safari, Android, iOS */
url('微軟雅黑.svg#微軟雅黑') format('svg'); /* Legacy iOS */
}
 

在頁面中需要 的處所應用該字型：

h1{font-family: '微軟雅黑';}