Cherry pick from fonts.googleapis.com in config.toml

tips & tricks
2

Hi, thanks for adapting my post. I love your adaptation. I was thinking about putting the selectors and elements in the config myself but had not done so because my template doesn’t change. I took and modified the hugo-universal-theme for Psychedelics Daily.

I’m in the middle of rebuilding my blog design so https://stoned.io is down right now.

The previous post in which I discussed this, I only linked to the post on how I did it on my blog, and since my blog is down, let me quickly share what I originally did, in case someone needs that for reference material.

In /config.toml

/config.toml

[params.font]
    # Some example fonts: Domine, Raleway, "Gentium Basic", Lato

    body = "Lato"
    heading = "Raleway"
    blockquote = "Gentium Basic"
    nav = "Domine"
    paragraph = "Roboto"

Where ever you have your <head></head> tags, in that partial template, right before the closing </head> tag, insert something like:

<!-- Google fonts -->
<link lazyload="1" href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800|{{ .Site.Params.font.body }}|{{ .Site.Params.font.heading }}|{{ .Site.Params.font.blockquote }}|{{ .Site.Params.font.nav }}|{{ .Site.Params.font.paragraph }}' rel='stylesheet' type='text/css'>

<style>
body {
    font-family: '{{ replace .Site.Params.font.body "+" " "}}';
}

h1, h2, h3,
h4, h5, h6 {
    font-family: '{{ replace .Site.Params.font.heading "+" " "}}';
}

blockquote {
    font-family: '{{ replace .Site.Params.font.blockquote "+" " "}}';

}
.dropdown a {
    font-family: '{{ replace .Site.Params.font.nav "+" " "}}'

}
.post-content p {
    font-family: '{{ replace .Site.Params.font.paragraph "+" " "}}'
}
</style>

Be sure to change the CSS selectors to what you need per your design.

This is basically how I control changing fonts across my entire site from simply modifing config.toml.

Thanks for Hugo. It’s amazing! :slight_smile:

1 Like