× Home
Adobe Open Source font family „Source Sans Pro“, „Source Serif Pro“ and „Source Code Pro“

Using fonts locally in Hugo

type case letterpress

Find free fonts, download them, integrate them locally into Hugo and use them in the web pages. A description of my approach. Fonts visually enhance the text display of web pages.

Beauty is in the eye of the beholder, but either way, an extra font counteracts the general monotony of normal fonts.

For data protection reasons, I would like to store the fonts I use on my web space and load them from there. By loading the fonts externally or checking whether the font has already been loaded, every web page called up in my blog is communicated to the external source. I find this unnecessary.

Find and download open source fonts

A good overview of open source fonts is provided by - Google Fonts . Most of the fonts listed there are not from Google. Google Fonts lists the different fonts on the website and displays the respective licence. The fonts are free of charge and, as far as I understand it, can be used without reference to the creators. I have included links to the licence conditions of the fonts I use in the link list at the end of the website.

I have chosen the open source font families „Source Sans Pro“, „Source Serif Pro“ and „Source Code Pro“ from Adobe.

For the compact download of the fonts, I use the website - google-webfonts-helper - by Mario Raftl. The service accesses the Google Fonts website and offers a very clear selection option for a font download free of superfluous things. After entering the font family in the search field, the font is displayed with various information and selection options.

I want to use the font - „Source Sans Pro“ - for normal texts. I have selected Latin as the character set. For the styles, I want to use Italic and 600 for bold in addition to Regular. Under “Copy CSS” I have chosen the variant for “Modern Browser”. Due to the limited selection of styles, only the styles used on my web pages have to be loaded by the user’s browser later on - keyword bandwidth.

Google Webfonts Helper by Mario Raftl
Google Webfonts Helper by Mario Raftl

I want to use the font - „Source Serif Pro“ - for headlines (h1 - h4). I have selected 600 as the style and deselected Regular. For “Copy CSS” select “Modern Browser”.

„Source Code Pro“ - I will use for source code. The “Regular” variant is enough for me.

The target group for this blog are people who create their website themselves and are not afraid of source code. Since this target group does not develop with ancient browsers, I have decided to use the “Modern Browser” variant mentioned above. This means font files in the format woff and woff2.

After the respective font has been saved locally via the download button, the @font-face CSS code must also be saved temporarily.

Integrate fonts into Hugo local

Within the Hugo project, I have created the subdirectory /fonts in the directory /static. The zip files of the fonts have to be unzipped and copied into the fonts directory.

Hugo directory structure for the fonts directory.
Hugo directory structure for the fonts directory.

The *.woff files occupy 103 KB of memory unpacked. The newer format of the *.woff2 files 82 KB, about 20% less. The browsers themselves choose which font format they understand. Since the files of one format only have to be loaded once, I find the size justifiable. Wikipedia - explains the difference between WOFF and WOFF2 formats. That’s it. The rest - the actual embedding - is done via CSS/SCSS.

Using fonts via CSS/SCSS

The best result with fonts is achieved when the fonts are integrated right at the beginning of the website creation. Subsequent integration of other font families can have an effect on the design. This can lead to displaced images and div blocks. Or it may affect the Responsive Web Design for smaller display sizes. But this can be adjusted again.

The following CSS/SCSS code loads the font files once and assigns them to the various HTML elements. I describe the CSS/SCSS code below the code display.

source-serif-pro-600 - latin - for h1, h2 and h3

// for: h1,h2,h3  
// source-serif-pro-600 - latin  
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Serif Pro'),
       url('/fonts/source-serif-pro-v11-latin-600.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-serif-pro-v11-latin-600.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
h1, h2, h3 { font-family: 'Source Serif Pro', Arial, sans-serif; }

I copied the @font-face CSS code as described above. Under src: the first entry is local(''). This entry looks locally to see if a font is available on the device. If so, the font is loaded locally. It is unlikely that the font is present, but nevertheless I have added the entry with the font name - local(‘Source Serif Pro’).

The entry url('/fonts/sourc.. points to the Hugo directory static. For the Hugo generator, the static directory is the root element.

The @font-face code loads the font. The actual assignment to the corresponding HTML tags must be specified separately. With font-family: ‘Source Serif Pro’, Arial, sans-serif;, the HTML tags are assigned ‘Source Serif Pro’ as the first font. If this font cannot be found by the browser, it searches for Arial and if it cannot find the font either, it searches for a sans-serif font.

sans-serif is a generic font family name. At least one generic family name should always be included in a list of font families. As there is no guarantee that a particular font will be available. This way, the browser can select an acceptable fallback font if needed.

source-sans-pro-xxx - latin - for p, ul li, div, span, i and figcaption

// for: p, ul li, div, span, i, figcaption  
// source-sans-pro-regular - latin  
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'),
       url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
// source-sans-pro-italic - latin  
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro'),
       url('/fonts/source-sans-pro-v14-latin-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-sans-pro-v14-latin-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
// source-sans-pro-600 - latin  
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro'),
       url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
p, ul li, div, span, i, figcaption {  
  font-family: 'Source Sans Pro', Arial, sans;  
}

For the “normal” text, I do not want a serif font. I use regular, italic and 600 (bold) as styles. An @font-face entry is needed for each style. The assignment to the corresponding HTML tags is done as described above.

The specification of the HTML tags must be adapted to the theme used. Simply start with a few HTML tags and add to the list if something is still missing. Do not forget the comma between the entries.

source-code-pro-regular - latin - for code

  
// for: code  
// source-code-pro-regular - latin  
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'),
       url('/fonts/source-code-pro-v14-latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-code-pro-v14-latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
code {  
  font-family: 'Source Code Pro', monospace;  
  span { font-family: 'Source Code Pro', monospace; }
}

For displayed source code, a so-called monospace font is usually used. Each character has a fixed character width, which makes source code easier to read. monospace is a generic font family and is only used as a fallback mechanism. If „Source Code Pro“ is not available, the browser searches locally for a font with a fixed character width.

I use the one provided by Hugo on this website - Syntax Highlighting - for source code. A peculiarity of this tool is that the source code is output in span HTML tags. Hence the additional SCSS entry for span.

Conclusion

With little effort, a website can be made more attractive by using appropriate fonts. By limiting the font styles to those that are really used, the bandwidth requirement is relatively low. The integration via CSS/SCSS is simple thanks to the copied @font-face CSS. All that remains is to assign the font family to the corresponding HTML tags.

List of links to this post

This might also interest you

- Update 01. Aug. 2021 |
8 minutes to read
0
This post was created with Hugo version 0.87.0.

With the German language setting, comments are not displayed in the English version of the website and vice versa.

© 2021 - Frank Kunert  -  About me
A service from webdienste-kunert.de