Generating Webfonts

“Not all fonts are created equal”

So, as it turns out, fonts don’t work the same way everywhere. They are different sizes and different formats for different platforms.

I discovered while created this static site that if I wanted to have a fancy font that supports Japanese characters, like NotoSansJP, I would need to either source the font directly from Google (which would require me to rely on Google’s resource never changing), or convert the OS level font to something that is called a “Webfont”.

⛬

The crux of the issue with a fix

Webfonts come in one of the following flavors:

All of these different webfont formats are designed to work with different browsers with different design considerations and eras that they were made in. In order for fonts to display correctly, you need to have at least a few of these formats come down with a webpage when it loads into a user’s browser. As far as I can tell, svg is not particularly necessary (and has large file sizes to support the full glyphs it contains).

Most non-web fonts can be had by downloading a corresponding OpenType font (.otf). Cool, no problem. Except getting an otf into these other webfont flavors isn’t necessarily automatic.

So, like most people, I hunted around and I was able to find one bdusell’s webfont-generator

I had to go down a bit of a rabbit hole to get all of the dependencies working for this, because it was written with a Maven version that’s kind of out of date now.

Basically it required:

I also had to manually edit the setup shell to swap out some lines in the maven compiler to allow it to compile with a newer version, I just used sed to shove in the new 1.7 version where it was missing and the compiler automagically did its thing.

force_new_compiler() {
  log 'Forcing new compiler version..'
  (
    cd "$SFNTLY_DIR"/java &&
    sed -i -e "s/source>.*/source>1.7<\/maven.compiler.source>/g" pom.xml &&
    sed -i -e "s/target>.*/target>1.7<\/maven.compiler.target>/g" pom.xml
  )
}

My cloned version of bdusell’s repository with the fix can be found here

⛬

Generating the webfonts

I created a github repository to host the generated webfonts, with the original google license included, which should allow for redistributed modifications.

Generating the fonts after fixing the generator boiled down to:

./generate-webfonts -o assets MyFont.ttf --css MyFont.css

which produced a folder of the fonts and a premade css @font-face styling element that I could import into my page theme.

@font-face {
  font-family: 'NotoSansJP-Bold';
  src: url(/fonts/NotoSansJP/NotoSansJP-Bold.eot);
  src: url(/fonts/NotoSansJP/NotoSansJP-Bold.eot?#iefix) format('embedded-opentype'),
        url(/fonts/NotoSansJP/NotoSansJP-Bold.woff2) format('woff2'),
        url(/fonts/NotoSansJP/NotoSansJP-Bold.woff) format('woff'),
        url(/fonts/NotoSansJP/NotoSansJP-Bold.ttf) format('truetype');
}

I added the fonts to my theme under the path /font/NotoSansJP/ and was able to source them at the top of my theme CSS exactly as above.

And now the rabbit hole I jumped down just to be able to type:

Has been immortalized in the form of a post that hopefully will benefit somebody with a similar issue.

Have a nice day ~

-N

References for this post

GitHub - ericmurphyxyz/hugo-starter-theme: Simple starter theme for Hugo
Creating your own Hugo Theme! - YouTube
Homepage Template | Hugo
Page Variables | Hugo
Quick Start | Hugo
html - Remove white space on ul with css - Stack Overflow
How To Load and Use Custom Fonts with CSS | DigitalOcean