my first sharing back …
I wrote a shortcode that allows you to use Google Fonts and a variety of styles, etc
Read here …
How to use custom fonts with shortcode
Gist for Shortcode is here
This is a good start, but 
- check out what happens if you use this shortcode twice on one page. If the font is the same, it will be loaded again via the link tag
- the link tag itself belongs into the head of the document, not the body
- putting the text into a div might have unexpected results if you are using css-frameworks
My attempt would look like this:
- make two shortcodes. one for the head partial where the fonts get loaded (once) and one for the “execution” of the fontified text
- in the header first load
<link fontfile>and then add a<style>.fontstyle1 {font-family: andsoone;}</style> - then in the second shortcode use the class you defined in the first one. an automated way would probably be something along the lines of .font_
fontname
Probably .Scratch might help.
Your shortcode is good if it’s only used once per page and in an HTML5 document (they are less strict with the location of the link tag I think… but maybe it’s just the browser who accomodates you… in my head it’s like “link in the head, link in the head, link in the head”.
1 Like
Hi @davidsneighbour - this part made me laugh,
and thanks for the feedback
so the idea would be - anyone in their .md files writes
{{< shortcode1 font-family font-family2 >}}
{{< shortcode2 >}}
some text
{{< /shortcode2 >}}`
This way you only get one hopefully at the top of the page.
But … I think you’re suggesting the shortcode.html file has to use scratch and call / write a partial-head layout (listing the fonts the user wants) – which is above my code skills today.
Next for me … I’ve got a few other shortcodes which I’m writing and will share here - and been playing with a theme-component (in lieu of Hugo supporting plugins)
all comments welcome - and on the {{}} shortcode ill keep playing
cheers
Damien