How to use Google Fonts

[augusto-garcia]

Hi,
I am trying to do a few customizations on fonts.
I read that this can be done on file variables.less, but it seems it is not working. When I change @base-font and/or @heading-font nothing happens.
I am running jekyll on a linux machine and seeing the output with "jekyll --server".
How can I make this work? I would like to use Google Fonts.
Thanks!

[mmistakes]

Sounds like you need to compile the .less files into .css for the change to take effect. Here's roughly what you need to do:

1. Change the Google font script in the _includes/_head.html from <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'> to whatever new embed Google gives you upon selecting the fonts you want to use
2. Update the font-family variables in variables.less to match the names Google uses (sounds like you've done this already).
3. Compile the .less files into a new css/main.min.css stylesheet. I provided Grunt.js tasks to do this for you so just check the theme documentation on how to install Node, required modules (if you haven't already), and the commands to run Grunt.

Hope this helps.

[augusto-garcia]

Thanks for your help.

It didn't work, unfortunately, for the installation part (I have no idea about what I was doing, sorry). I got this on my Linux terminal when I did npm install

sh: 1: node: not found
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! Error: ENOENT, lstat '/home/augusto/git/statgen-esalq/node_modules/grunt-contrib-imagemin/node_modules/gifsicle/node_modules/bin-wrapper/node_modules/mout/string/endsWith.js'
npm ERR! If you need help, you may report this log at:
npm ERR! http://github.com/isaacs/npm/issues
npm ERR! or email it to:
npm ERR! npm-@googlegroups.com
...

[mmistakes]

Sorry I don't have much experience with Linux. Looks like you don't have
Node installed from the errors. Or if it's installed it needs to be updated
before doing running npm install to bring down all the modules needed for
Grunt.

On Monday, June 9, 2014, Antonio Augusto Franco Garcia <
notifications@github.com> wrote:

Thanks for your help.

It didn't work, unfortunately, for the installation part (I have no idea
about what I was doing, sorry). I got this on my Linux terminal when I did
npm install

sh: 1: node: not found
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! Error: ENOENT, lstat
'/home/augusto/git/statgen-esalq/node_modules/grunt-contrib-imagemin/node_modules/gifsicle/node_modules/bin-wrapper/node_modules/mout/string/endsWith.js'
npm ERR! If you need help, you may report this log at:
npm ERR! http://github.com/isaacs/npm/issues
https://github.com/isaacs/npm/issues
npm ERR! or email it to:
npm ERR! npm-@googlegroups.com
javascript:_e(%7B%7D,'cvml','npm-@googlegroups.com');
...

—
Reply to this email directly or view it on GitHub
#60 (comment)
.

[augusto-garcia]

I will see what I can do; if I found a solution, I will post it here. Thanks.

[augusto-garcia]

I found a weird but possible solution. I added the following to home.html, etc, and the font changed.
Do you know if I can use this to customize styles on heads, paragraphs, etc.?
(Sorry, but I no nothing about html and jekyll)

<style> * { font-family: 'Maven Pro', sans-serif; } </style>

[mmistakes]

The * selector targets every element on the page. I wouldn't do that because it's unnecessary. The easiest solution is to work with the .less files I provided. You change the font in one place and it updates everywhere.

Since you're having problems getting Node and Grunt installed on Linux you could just modify the main.min.css stylesheet instead. That's what the less files compile into. It's just harder to read because it's minified to reduce filesize. And you'll have to update the font-family declarations in numerous locations. Which can be tricky if you have no idea what you're looking at or where to look.

If you're going to modify the main.min.css file I'd look at CSS Beautify. Copy/paste the css into that site and it will spit out a nicely formatted stylesheet that you can read easily.

Other than me teaching you how to write CSS I think that's about all I can offer 😉

PS: If I remember correctly the majority of the serif font (PT Serif) is applied to the body element. And the sans-serif font is applied to the headings (h1, h2, h3, h4, etc). If you use something like Chrome or Firefox's dev tools you can right click on an element you want to change and inspect it. Then it will show you exactly what lines in main.min.css are applying what styles so you can change them to whatever you want.

Hope this helps!

[augusto-garcia]

Well, thanks a lot! Thanks for your patience as well. I will follow these suggestions.