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

█ 在看到設計師的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.

就大功告成囉！