2

I'm trying to define font variables in my jekyll template's _config.yml so that I can use liquid in my css and change all type styles directy from config. Somehow it's not rendering, is this even possible?

This is what I have in my _config:

fonts:

 primary: Roboto Slab

 secondary: Helvetica

And css:

body {
  font-family: '{{ site.fonts.primary }}',{{ site.fonts.secondary }},Arial,sans-serif;
}
flyx
  • 35,506
  • 7
  • 89
  • 126
mqvlm
  • 25
  • 4

2 Answers2

3

You have to provide YAML front matter in order for Jekyll to process Liquid tags in the css file:

---
---
body {
  font-family: '{{ site.fonts.primary }}',{{ site.fonts.secondary }},Arial,sans-serif;
}

The --- lines are the start and end of YAML front matter. You do not need to define anything in it.

flyx
  • 35,506
  • 7
  • 89
  • 126
  • Yes, indeed I had forgotten those but it doesn't work either. Should I create the font variables inside the front matter in the css? how should the syntaxis be in this case? – mqvlm Aug 15 '16 at 18:17
  • *It doesn't work either* is not an appropriate problem description. Please elaborate how your CSS file looks like after being processed with Jekyll. – flyx Aug 15 '16 at 20:43
  • The css renders out with the place where the liquid object should be empty. p {font-family: ' ',"Helvetica Neue",Helvetica,Arial,sans-serif;} The first two semicolons should have 'Karla' font inside. Other color tags I defined in config work just fine, only this one doesn't! – mqvlm Aug 25 '16 at 15:32
  • Ok, it finally works. My problem was that I had to quit and serve the site again every time I made changes in config.yml, because they are not seen by --watch. Thank you for your time though! – mqvlm Aug 25 '16 at 15:41
  • How can I also change the title page font size? What parameter do you use in the same YAML front matter? – Stryker Sep 07 '18 at 18:51
  • @Stryker Comment sections are not for additional questions; you can ask a new question giving all necessary information and linking to this if it's relevant. – flyx Sep 08 '18 at 12:19
0

Why not simply declare these variables in your sass file ?

DirtyF
  • 661
  • 7
  • 10
  • yes you could do that but in order to design a template that for example someone who doesn't know sass could implement it's very clean to let them just define the fonts they would like to use in config.yml. It's a simple solution! – mqvlm Aug 25 '16 at 15:44