Home 其他 【CSS 筆記】如何/怎麼 使用Google fonts 到Codepen中

【CSS 筆記】如何/怎麼 使用Google fonts 到Codepen中

by Yuki Lai

在看到設計師的UI設計稿的時候,常會有一個想法:「這字好漂亮喔!但在網頁上要怎麼呈現?」

Google fonts 提供兩種字體引入的方式,第一種是使用 <link> ,另一種則是使用 @import :

▼ 在HTML的部分載入

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&display=swap" rel="stylesheet">

See the Pen 【CSS 筆記】如何/怎麼 使用Google fonts 到Codepen中 by sihyu (@sihyu) on CodePen.

▼ 或是在HTML貼上以下程式碼

<style>
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&display=swap');
</style>

See the Pen 【CSS 筆記】如何/怎麼 使用Google fonts 到Codepen中 by sihyu (@sihyu) on CodePen.

就大功告成囉!

你可以參考以下其他文章

Leave a Comment