Use Google Fonts on Your Site

Keren Xu

2019/11/17

Google Fonts offers plenty of font options for free. Here is a step by step instruction on how to embed Google Fonts to your Blogdown website.

First, pick a font you like on the Google Fonts website.

My picture

Click on the plus sign on the top right corner.

My picture

Select customize to pick different categories of the font that you would like to add to your website.

My picture

Copy and paste the codes below to your fonts.css file.

My picture

Here is what my fonts.css file looks like:

@import url('https://fonts.googleapis.com/css?family=Muli|Oswald&display=swap');

.title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Muli', sans-serif;
  font-weight: 400;
}
code {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 85%;
}