As some of you might have noticed, there has been a little turmoil here in Austria concerning google fonts and DSGVO. I will not go into details here, but it seemed right about time to update my tiny blog installation and change the way, google fonts are embeded into my site.

Hugo is a beautiful, easy to use static website generator based on go language. Although it seems that these kind of website frameworks mainly attract developers, I strongly sugest giving it a try, even if you are not into coding.

Having such a lightweight opensource framework at hand can have great advantages compared to a full blown cms such as wordpress, umbraco or kentico. Of course these products are not comparable when it comes to features like content editing, e-commerce, marketing, bi, integration, etc. But often, even for small companies, you dont’t need all of those features, or at least integrated within on single product. With the rise of cloud computing and SaaS, for every each one of these use cases, a plattform is there to serve your purpose. So in the end, it can be all about some static content - and what would be more suitable than a static website generator like hugo.

Which brings us back to the original topic - let’s make those google fonts locally.

Table of Contents

• Fork hugo template repository
• Remove submodule
• Add forked repo as submodule
• Change forked theme
• Commit

Fork hugo template repository

If you are a happy owner of a hugo installation and you have followed the instructions on installing a theme you will probably have used git submodule to download and add the desired theme. In my case I was using this beautifuly theme called tranquilpeak. So in order to make some changes to this theme I forked a copy of

https://github.com/kakawait/hugo-tranquilpeak-theme.git

to my repository

https://github.com/altbrot/hugo-tranquilpeak-theme.

Remove submodule

Next I removed the original theme from my hugo repo:

git submodule deinit theme/hugo-tranquilpeak-theme
git rm theme/hugo-tranquilpeak-theme

Add forked repo as submodule

Now I need to re-add the previously forked repo as submodule again:

git submodule add https://github.com/altbrot/hugo-tranquilpeak-theme \
themes/hugo-tranquilpeak-theme

To see if everything worked out fine, I made a test build with hugo server - and luckily it looked the same.

Change forked theme

From this point on it’s a good advise to take a look at the theme documentation. In my case the tranquilpeak developer made a hell of a job providing all kinds of information. After reading the developer documentation it was clear that the steps to make some changes boil down to this

Basic Workflow

1. Go to theme/hugo-tranquilpeak-theme folder with cd theme/hugo-tranquilpeak-theme
2. Install requirements
3. Run npm install to install NPM dependencies
4. Make your changes
5. Run npm run start to build the theme once and rebuild after each change

With this information in place the actual changes where quite easy. The file theme/hugo-tranquilpeak-theme/src/scss/utils/_fonts.scss contained everthing that needed a change. Basically what we needed to do is download all referenced fonts, place them somewhere within theme/hugo-tranquilpeak-theme/src folder and change all according references.

So for a section like this

@font-face {
    font-family: 'Open Sans';
    font-style:  normal;
    font-weight: 400;
    src:         local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}

I opened https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf in a browser (actually I used wget ;-) to download that font. Next I created the folder theme/hugo-tranquilpeak-theme/src/fonts and placed the downloaded font there. Finally I changed the previous line to look like this

@font-face {
    font-family: 'Open Sans';
    font-style:  normal;
    font-weight: 400;
    src:         local('Open Sans'), local('OpenSans'), url(/fonts/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}

After repeating that for every line in that file and calling npm run start the result was as expected:

Commit

After committing and pushing everything to my repo, I was done.

Now as already mentioned, by using a fork of the original theme repository, from now on I have to check for updates myself and merge any changes into my fork. But I guess that is something for another post.