The font that comes with the default hexo fault is quite nice, however, I like using the Ubuntu font especially for code. As the Hexo theme uses Google fonts in some places already, then it was really easy to change which one Hexo uses. Here I will show you how to change over to the Ubuntu font family for text and sorce code using Google Fonts.
As Hexo uses Google Fonts by default, then you can simply define which font you want by using the font name. The default Heox theme, landscape, uses a file called
source/css/_variables.styl to define common variables, such as fonts.
_variables.styl file you can see the fonts that Hexo uses by default, which are assigned to three variables:
- font-mono - (source code)
- font-icon - (icons in navbar)
Font-icon is configured to use Font Awesome to make it quick and simple to add logos such as twitter, facebook, linkedIn and RSS feeds. Using font icons is more efficient than using image files as they are scalable, so no need for multiple image files for the logos.
This is what the fonts in the hexo default theme look like:
I prefer to use the Ubunt fonts, for text and for source code. So I updated the
source/css/_variables.styl file with Ubuntu for the font-sans and font-serif variables and Ubuntu Mono for the font-mono variable.
Using Ubuntu fonts just works on my laptop, as I use Ubuntu as my operating system and the Ubuntu fonts are just there. When I publish my Hexo website, I cant guarantee everyone is using Ubuntu so I use Google Fonts to spread the Ubuntu font love.
Google fonts are a wide range of open fonts hosted in the cloud and part of a content delivery network (CDN). This means that a whole range of fonts are freely availble to be used in your own websites and apps. The content delivery network ensures these fonts are loaded (relatively) quickly anywhere in the world.
You can browse the fonts avaible for use and see the code to include them in your websites by visiting google.com/fonts
To keep these fonts as lightweight as possible whilst loading into the browser, I chose only the Ubuntu fonts I needed. In this case, I chose the Ubuntu Normal and Italic fonts at 400 weight and bold at 700 weight
I also want to show code in the Ubuntu Mono typeface at both 400 and 700 weight for normal and bold text respectively. Google Fonts website generates me the following link I can use in my Hexo website.
I updated my custom theme to use the Ubuntu Google fonts by editing the
layout/_partial/head.ejs file. This already had a Google Font for Source Code Pro, so I simply replaced that line with the new URL I got from Google Fonts as above.
Line 10: Ubuntu fonts included from Google Fonts
When Hexo generates all the theme files, the Google Docs URL for the Ubuntu fonts gets included in the head part of all pages. This ensures that even thought without Ubuntu fonts installed on their device will see the page with Ubuntu fonts.
Changes to the
source/css/_variables.styl file are picked up straight away if you are running the command
hexo server, so all you would need to do is refresh your browser.
Hexo with the Ubuntu fonts looks like:
Changing to Ubuntu fonts or any other Google font is pretty easy with Hexo. It may not seem a big change that I have made, but as I refer to my blog many times during the week (and sometime many times a day), its nice to have a font that I find pleasing to read.
This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket