Font selection in theme

chandra · October 15, 2017, 4:25pm

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.

Shadow53 · October 15, 2017, 8:07pm

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.

maiki · October 15, 2017, 8:09pm

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.

Leo_Merkel · October 16, 2017, 11:16am

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.

budparr · October 16, 2017, 3:34pm

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.

chandra · October 18, 2017, 5:42pm

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!

chandra · November 18, 2017, 6:47am

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:

In config.toml I have these lines:

 googlefonts = ["Droid Sans", "Fira Mono"]
 fontbody = 'Droid Sans'
 fontcode = 'Fira Mono'

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.

chandra · November 19, 2017, 2:08pm

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:

config.toml has a variable called googlefonts set so:

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

/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 }}

/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.

ixodid198 · March 13, 2018, 2:00am

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.

julianoaklein · March 13, 2018, 2:39am

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

ixodid198 · March 13, 2018, 2:56am

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

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

Still, no effect.

chandra · March 13, 2018, 4:38pm

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!

patarol · August 10, 2018, 9:29am

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

brndn · January 21, 2019, 4:02pm

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.

jeremybise · April 22, 2019, 4:10pm

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.

gist.github.com

https://gist.github.com/jeremybise/a6afea2d4c7f9044180ffeb663a617cf

baseof.html

<!-- Wherever your head tag is located, add the new partial -->

<head>
  {{ partial "google-fonts" . }}
</head>

config.toml

[params]

google_fonts = [
  ["Fira Code", "400, 700"],
  ["Open Sans", "400, 400i, 700, 700i"]
]

heading_font = "Fira Code"
body_font = "Open Sans"

google-fonts.html

<!-- In your partials folder -->

{{ if .Site.Params.google_fonts }}
  {{ $fonts := slice }}
  {{ range .Site.Params.google_fonts }}
    {{ $family := replace (index (.)  0) " " "+" }}
    {{ $weights := replace (index (.) 1) " " "" }}
    {{ $string := print $family ":" $weights }}
    {{ $fonts = $fonts | append $string }}
  {{ end }}

This file has been truncated. show original

There are more than three files. show original

Timo_Korner · November 22, 2022, 12:04pm

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

Janeer · December 6, 2022, 5:44pm

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

Topic		Replies	Views
How to add custom CSS to Hugo theme (Casper Two) support	2	582	August 10, 2019
I have a question on how to change font's in Hugo theme support	2	553	August 9, 2019
Ananke: own color palette Using Themes	1	2163	October 7, 2019
How To Dynamically Use Google Fonts In A Hugo Website [config.toml] tips & tricks	4	4309	October 30, 2016
How do I change the font in the Paper theme support	4	410	August 15, 2023

Font selection in theme

Related topics