[SOLVED] Roboto Light/Thin Webfont not rendered

support
1

I want to use Roboto Thin Google Webfont (weight 100) in a slightly tweaked version of the hyde-hyde theme. Google lists Roboto Thin and Thin Italic as included in the Roboto family, but the thinnest rendered appears to be weight 300 even though the CSS calls for 100.

Is it possible to include Roboto TTF font files in the Hugo directory structure? If so, where should they be put and what would be the URL to access them? Would just the URL for the Roboto normal file adequate for accessing all the other weights?

From my reading of the documentation, I believe the files should be located in /static/fonts – but can they all be located in a subdirectory (e.g. Roboto)?

As an aside, I would really like to see a section of the documentation devoted to font files and Webfonts.

2

Everything that you put in the static/ directory will be copied as-is. So you can have any file or structure that you want to have there.

3

SOLVED: It’s nothing to do with Hugo, it’s a Webfont issue with Firefox and Chrome. I found the answer here.

However, I had to change the weights of Medium/Medium Italic to 500, Light/lLight Italic to 300, and Thin/Tin Italic to 100 to get it to work.

4

Most modern browsers support woff2 so you can generally ship less files with your code if you fall forward to the newer format, though I’m not sure if the woff2 version comes packed with the font variants when downloaded from Google.

5

Here my solution.

In config.toml

googlefonts = [
    "Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic",
    "Roboto+Mono:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic"
]

In themes/example/layouts/partials/head.html

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

styles.css

body {
  font-family: Roboto, "Roboto Mono";
 }
code, pre, samp, kbd, tt {
  font-family: "Roboto Mono", monospace !important;
  overflow: auto;
}
h1 {
   font-weight: 100;
}
h2 {
  font-weight: 400;
}
1 Like
6

Thanks, @Joerg, that’s very helpful. As I preferred to use fonts from my own server, I downloaded the full Roboto Webfont kit from FontSquirrel, created a separate fonts.css file in /fonts and added @import url("fonts.css"); at the top of '/fonts/custom.css` to load the font definitions first.

Thanks to everyone who responded.