CODEWITHSUNDEEP
cssthemeshugo
ixodid
ixodid

Reputation: 2400

Change font in Hugo theme

New to Hugo and css. Trying to change the fonts of the beautifulhugo theme based on these instruction:

See Chandra's Nov 17 post: https://discourse.gohugo.io/t/font-selection-in-theme/8803/8

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

Added the following to config.toml

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

Added this to static/css/custom_style.css

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

And added this to layouts/partials/head_custom.html

 {{ if .Site.Params.googlefonts }}
 <link rel="stylesheet" href="{{ .Site.Params.googlefonts }}" type="text/css" media="all" /> 
 {{ end }}

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

Everything should be available here: https://github.com/ixodid198/blog

Upvotes: 3

Views: 10066

Answers (2)

Jordan He
Jordan He

Reputation: 350

In config.toml, add 

[params]
    custom_css = ["css/custom_style.css"]

Not sure if this works on all themes generally, but it works on the theme I'm using.

Upvotes: 2

idoric
idoric

Reputation: 179

You say:

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

Why would you do that if you are using google fonts?

Anyway, did you try removing http: form googlefonts = “http://fonts.googleapis.com/css?family=Itim|Limelight”

You probably have something down the line in your code that is overwriting you font settings.

It would be helpfull if you could put your site somewhere online so that we can check what is going on.

Upvotes: 0

Related Questions