在網站設計中，為了讓網站更美觀、獨特，我們需要使用不同的字體。但是，我們在網頁中使用的字體一般是瀏覽器默認的，這通常不夠滿足網站美觀的要求。因此，我們需要使用CSS外部字體引用功能，以使用更多的字體。

使用CSS外部字體引用有以下幾個步驟：

@font-face {
font-family: 'FontName'; /*字體名稱*/
src: url('fontfile.eot'); /*字體文件 - IE9 */
src: url('fontfile.eot?#iefix') format('embedded-opentype'), /*字體文件 - IE6-IE8*/
url('fontfile.woff') format('woff'), /*字體文件 - Modern Browsers*/
url('fontfile.ttf') format('truetype'), /*字體文件 - Safari, Android, iOS*/
url('fontfile.svg') format('svg'); /*字體文件 - Legacy iOS*/
font-weight: normal;
font-style: normal;
}

第一步是定義字體。CSS中使用@font-face定義字體。我們可以給字體指定名稱，然后將字體文件鏈接到CSS文件。我們需要在CSS文件中指定字體所屬的三個屬性：字體名（font-family）、字體的加粗/正常顯示（font-weight）和傾斜/正常顯示（font-style）。

第二步是將字體應用到CSS元素中。一旦我們定義了字體，就可以在CSS樣式中引用它并將其應用于網頁上的元素。

body {
font-family: 'FontName', sans-serif;
}

字體名稱是我們在定義字體時設定的名稱。我們可以通過將字體名稱放在font-family中，將外部字體引用應用于CSS文件中的任何元素。另外，我們可以通過指定默認字體來設置字體備用方案。

CSS外部字體應用是讓網頁設計變得更加豐富、生動和美觀的好方法。現在，你可以了解如何引用它們并將其應用于你的CSS設計中。