One of interesting things I noticed when accessing my blog is that it's making googleapis call for fonts.
Since I haven't set it anywhere and not really being a fan of Google, with a little digging trough the pelican-twitchy theme I use, I found the location of the call in bootstrap.sandstone.min.css.
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
Besides obviously tracking one of the reasons to remove this extra call is speed. In case that website is self-hosted, google servers may offer some benefit speedwise but since my blog is hosted on Github there is not even that.
So how can we do it? Not being really interested in web-dev before and google searches being surprisingly unhelpful it took me some time to find a way to do this.
I stumbled upon https://google-webfonts-helper.herokuapp.com/fonts an amazing site which makes this process really easy.
We just need to select font, font weights and charset (in case of sandstone Roboto, 400,500,700 and latin) and we get autogenerated css to replace googleapi call + zip with all required fonts.
For example to replace Roboto 400 we just need to replace api call with the following css (use Modern Browsers setting to generate css).
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/roboto-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
only thing left to do is to put fonts in required folder (fonts by default), minimize generated css and we are all set.
Comments
comments powered by Disqus