How to change the font for the entire website

[cs-mshah]

I wanted to change the font for the entire website. I tried dong the following:
Modify layout/partials/head/link.html and add:

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap"
    rel="stylesheet">

Modify assets/css/_override.scss to:

// ==============================
// Override Variables
// ==============================
// Override global font family

@import url('https: //fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
$global-font-family:
    Nunito,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    PingFang SC,
    Microsoft YaHei UI,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif !default;

However, this doesn't modify the font. I already have a custom homepage where I've explicitly added the font link in its head which is able to modify the font for the homepage. However, I wanted a uniform font across my blog.