█ 在看到設計師的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.
就大功告成囉!