Font selection in theme

I am a brand new user of Hugo and am impressed by how fast I could get my first post up locally.

I used the suggested Ananke theme but would prefer to select fonts of my choice.

Is such a task heavily theme-dependent? And if so, how do I find themes with easily customizable fonts?

A similar post Change font of theme does not seem to have answers.

Can someone please point me to a solution?

Thanks.

2 Likes

The theme developer is the one who really determines if you can change the fonts used in the theme.

In the case of Ananke theme, there looks to be a file src/css/_styles.css that you can place custom CSS in, then run a command to generate a new CSS file. You can add the CSS you want to specify different fonts for your site from there.

1 Like

That other question may not have been answered as it isn’t a Hugo-specific issue. Fonts are added via CSS, and that can be modified as an override or by modifying the theme. If you have questions about that, please read the theming documentation. :slight_smile:

Hope this helps: https://stoned.io/web-development/hugo/How-To-Dynamically-Use-Google-Fonts-In-A-Hugo-Website/. It’s not depending on any theme - just include it in your theme of choice.

I use this technique in my basis template for all projects and it works like a charm. Just enter the name of the google font in config.toml and you’re all set.

2 Likes

Hey, @chandra I’m the theme author. The post that @Leo_Merkel linked to is right on, if you want to use a Google font.

There are some “web safe” fonts that you can choose from just by adding an item in the config.

for example. To use the default, it would look like:

[params]
  body_classes = "avenir bg-near-white"

But you could change that to:

[params]
  body_classes = "georgia bg-near-white"

The fonts you can use are here: https://github.com/tachyons-css/tachyons/blob/v4.7.0/src/_font-family.css

I’ll add something about this to the readme too (done). If you have specific questions about the theme, feel free to hit me up on the repo. I’m usually here in the forums, but if you drop an issue on the repo I’m sure to get it.

1 Like

Thanks to everyone for your informative replies: you are a very friendly and helpful community.

I am slowly beginning to realize that the attributes of themes vary with the different authors, although within a given overall structure. I also realize that themes vary with the purpose of the website and that choosing something aligned to my purpose means that customization can be reduced.

I will follow the Google Fonts method @budparr and @Leo_Merkel have outlined and see how I go.

Cheers!

1 Like

Thank you @Leo_Merkel. I found your idea very appealing as it is generic and works across themes.

However, I found a difficulty with the suggestion from the link given because the + in the Google font name for multi-barrelled font names was being translated as %2b when the partial was rendered. This caused a 404 error and the chosen fonts were not being rendered.

I then came across this workaround by @pauby and tried it.

It works, and the + to space issue is circumvented as well.

FWIW, I giving below the MWE (minimal working example) in case it helps others:

  1. In config.toml I have these lines:

     googlefonts = ["Droid Sans", "Fira Mono"]
     fontbody = 'Droid Sans'
     fontcode = 'Fira Mono'
    
  2. In layouts/partials/head_custom.html, I have these lines:

     {{ range .Site.Params.googlefonts }}
           <link rel="stylesheet" {{ printf "href=\"//fonts.googleapis.com/css?family=%s\"" . | safeHTMLAttr }} type="text/css" media="all" />
         {{ end }}
    
     <style>
     body {
         font-family: '{{ .Site.Params.fontbody }}';
     }
     code {
        font-family: '{{ .Site.Params.fontcode }}'; 
     }
     </style>
    

If there is a more elegant or compact way to achieve this, please advise me.

Thank you.

1 Like

I have since refined my solution to incorporate ideas I have encountered on this forum:

(a) CSS styling via variables should preferably not reside in a Hugo partial template, but rather should be handled with a CSS pre-processor. This allows fine-grained font control via add-on stylesheets.

(b) The loading of the Google Fonts may still be accomplished via a Hugo partial template.

Here is what I ended up doing:

  1. config.toml has a variable called googlefonts set so:

googlefonts = "//fonts.googleapis.com/css?family=Merriweather|Fira+Mono|Droid+Sans"

  1. /layouts/partials/header_custom.html has this invocation:

     {{ if .Site.Params.googlefonts }}
     <link rel="stylesheet" href="{{ .Site.Params.googlefonts }}" type="text/css" media="all" /> 
     {{ end }}
    
  2. /static/css/custom_style.css has lines like these:

     p {
       font-family: "Merriweather", serif;
     }
     code {
       font-family: "Fira Mono";
     }
    

This is admittedly a little more cumbersome to maintain when a font change is desired, but is, I believe, in keeping with a cleaner layout as envisaged by the designers.

Thanks to @alexandros here.

Hello,
New to Hugo and css. Trying to change the fonts of the beautifulhugo theme based on these instructions.

I have downloaded two fonts and placed them in static/fonts

Added the following to config.toml

googlefonts = “//fonts.googleapis.com/css?family=Itim|Limelight

And added this to static/css/custom_style.css

body {
font-family: ‘Limelight’, cursive;
}
p {
font-family: ‘Itim’, cursive;
}

yet, no changes are visible. Please advise as to what I am doing wrong.

The Google fonts link is incomplete. Missing https at the begining.

Hi,
I copied the structure of Chandra’s post. Tried

https://fonts.googleapis.com/css?family=Itim|Limelight"

Still, no effect.

I have tried it both with https://fonts... and simply as //fonts... config.toml. It seems to work in both cases.

I have tried your fonts in my CSS style sheet and they work. Please see attached image from a test blog to confirm that these are the fonts you seek.

limelight-itim.

Might I suggest that you use double quotes in your CSS file for the font names because that is how I have it in my custom_style.css, e.g., font-family: "Itim", cursive;

I have been away from Hugo and my work on my website for some time now and am aware that many changes have happened in the interim. My version of Hugo is v0.37 in case that helps.

Cheers!

I’m trying to change the font in my caspter-two theme and I’m not able to accomplish it:

I’ve created layouts\partials\header_custom.html and add the code:

{{ if .Site.Params.googlefonts }} &lt;link rel="stylesheet" href="{{ .Site.Params.googlefonts }}"
 type="text/css" media="all" /&gt; {{ end }}

and then I’ve created the static\css\custom_style.css.
The casper-two theme doesn’t have partials and css directories, so I had to created it.

I can’t change the font in my blog.
I’m a R programmer so I do not understand css that much…

The font I want to use Roboto. This is what I’ve added to my custom_style.css

p {
   font-family: "Roboto", sans-serif;
 }

And this is what I’ve added to my config.toml:

googlefonts = "//fonts.googleapis.com/css?family=Roboto"
custom_css = ["css/custom_style.css"]  #under [params]

Any help is appreciated.

Thank you

I’m using casper-two theme as well.
I’ve added following code in

layouts\partials\head.html

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR|Roboto&amp;amp;subset=korean" rel="stylesheet"&gt;

<style>
p{
font-family: '{{ .Site.Params.fontbody }}', sans-serif;
}
body {
font-family: '{{ .Site.Params.fontbody }}', sans-serif;
}
code {
font-family: '{{ .Site.Params.fontcode }}', sans-serif;
}

then added following in

config.toml

fontbody = 'Noto Sans KR'
fontcode = 'Roboto'

so far it’s working for me.

Hi. I came across this post searching for the same thing. I wound up putting together something for a theme I’m working on - combining fonts, config file, partial and SCSS. Here’s the Gist link if it helps anyone. Or if someone sees a way to improve it, let me know.

After more than five years, as of finals of 2022, The link does not work anymore.

Unfortunately it doesn’t work( Can anyone update the link?