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

**URL:** <https://discourse.gohugo.io/t/cherry-pick-from-fonts-googleapis-com-in-config-toml/10327>\
**Category:** tips & tricks\
**Created:** [February 2, 2018, 7:04pm UTC](https://discourse.gohugo.io/t/cherry-pick-from-fonts-googleapis-com-in-config-toml/10327 "2018-02-02T19:04:03Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Hash\_Borgir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hash_borgir/32/6655_2.png) [@Hash\_Borgir](https://discourse.gohugo.io/u/Hash_Borgir)\
**Post date:** [February 7, 2018, 5:05am UTC](https://discourse.gohugo.io/t/cherry-pick-from-fonts-googleapis-com-in-config-toml/10327/2 "2018-02-07T05:05:14Z")

</div>

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](https://github.com/devcows/hugo-universal-theme) for [Psychedelics Daily](https://www.PsychedelicsDaily.com).

I’m in the middle of rebuilding my blog design so [https://stoned.io](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! 🙂

---

_[View the full topic](https://discourse.gohugo.io/t/cherry-pick-from-fonts-googleapis-com-in-config-toml/10327)._
