HTML, URL's and escaping

support
1

Hi,

This one is giving me a headache.

I am trying to embed Google Fonts into the header. My code is:

{{ range .Site.Params.Appearance.googlefonts }}    
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ . | safeHTML }}" type="text/css" media="all" />    
{{ end }}

The .Site.Params.Appearance.googlefonts is:

googlefonts = [ "Bitter", "Source+Sans+Pro" ]

The Source+Sans+Pro one always ends up as:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source%2bSans%2bPro" type="text/css" media="all" />

I need it to look like this:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro" type="text/css" media="all" />

If I use:

{{ . | safeHTML }}

just after the {{ range }} above then it prints it to the screen correctly. The issue just seems to be inside the URL.

I have tried combinations of safeHTML, safeURL, plainify, htmlUnescape but no matter what I try the above link is what I always get.

Any help?

Paul

2

See this: https://stoned.io/web-development/hugo/How-To-Dynamically-Use-Google-Fonts-In-A-Hugo-Website/

3

Thanks for sending that on. I did see that when I was searching the forums for an answer.

Unfortunately this isn’t what I’m looking for but is a good solution. I had already tried to have the same in the variable with spaces and then replace those spaces with ‘+’ in the header code. But it actually still gave me the exact same result I get now. The ‘+’ were still escaped.

My issue centres around the text being escaped by Hugo when I’ve told it not to (or at least I think I’ve told it not to).

What I do like about the solution you posted is that I can link the names of the fonts to CSS which I might look at once I get this working.

4

Go is very picky with special characters in URL strings and I’m afraid that there is no way around it (unless of course a Go guru can enlighten us).

Recently, I also run into the same problem as you, with the forward slash being translated like this \/

If you absolutely need to specify the Google fonts in your config then perhaps your only option to render this properly is to experiment with Hugo’s replace function. Here is an example of how I solved my problem. [SOLVED] Escaping backslashes from URL with Hugo - #4 by alexandros - support - HUGO

Wish I could help you more.

EDIT
This is untested but maybe it works in your case

{{ range .Site.Params.Appearance.googlefonts }}    
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ replace . "%2b" "+" |  safeHTML }}" type="text/css" media="all" />    
{{ end }}
5

Thanks for the code but neither the solution you provided or anything in your post provided the solution. I even changed the:

googlefonts = [ "Bitter", "Source+Sans+Pro" ]

To:

googlefonts = [ "Bitter", "Source_Sans_Pro" ]

And used:

{{ range .Site.Params.Appearance.googlefonts }}    
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ replace . "_" "+" |  safeHTML }}" type="text/css" media="all" />    
{{ end }}

But it was still the same issue. It appears the safeHTML just doesn’t work correctly, at least for ‘+’. I think I may raise this as a bug.

6

It may very well be a bug. So do file a issue, but also post the Github link in this topic for future reference.

7

Was just posting the issue when you wrote that reply! :slightly_smiling:

1 Like
8

@pauby following @moorereason post on the Github issue you opened.

He is right. Passing the entire href attribute fixes your issue.

You need to modify a couple of things though.

In you config.toml modify your parameter like this:

googlefonts = "//fonts.googleapis.com/css?family=Bitter|Source+Sans+Pro"

Then in your head partial replace what you have with:

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

I have just tested this and it loads the Bitter and Source Sans Pro stylesheet from Google Fonts.

There is no need to perform replace

EDIT
safeHTMLAttr is also not needed.

BONUS
To check if the googlefonts parameter is specified in your config.toml and then call it put the following in your head partial:

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

It is a pity I had to raise an issue ticket to get this answer. However I qwanted to keep the googleFonts in config.toml the way it was (ie. just the font names) so I amended the code, in header.html, to this:

    {{ range .Site.Params.Appearance.googlefonts }}
      <link rel="stylesheet" {{ printf "href=\"//fonts.googleapis.com/css?family=%s\"" . | safeHTMLAttr }} type="text/css" media="all" />
    {{ end }}

So I’ve used safeHTMLAttr which seems to work well.

1 Like
10

Good for you.