【心得】Google Fonts使用

练习刻板面时常常会遇到形形色色的字体
但若不是电脑本身有下载该字体的话，即便设定了还是会以预设字体呈现...这样版面看起来就差了几分味道

这时候就可以使用Google Fonts罗!

步骤一：
进入Google Fonts 选择想要的字体
https://fonts.google.com/

步骤二：
点选预览右侧的「+ select this style」将想要的样式加入清单(可复选)

(如果字体样式是 variable ，除了预设的样式之外，还可以自定义字体的粗细，一样点选「+ select this style」加入清单)

选择完之後打开右上的选单

步骤三：
如果选择了多个字体，这里会一并呈现
并提供能放进HTML的<link> 以及放在CSS的@import

步骤四：
若选择用<link>，记得将这一段放在自己撰写的样式<link>前

<!-- Google Fonts -->
<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=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
<form action="#">
  
<!--  自己写的CSS  -->
<link rel="stylesheet" href="style.css">

若选择用@import 则将它放到CSS文件的开头

(如果要将@import放在HTML内，要用<style>把它包起来)

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
</style>

最後记得对设定 font-family 啦!这样就可以简单又快速的设定字体了~在Codepen也能使用喔，是练习的好帮手~