27:null 28:["$","title",null,{"children":"Google Fonts in Observable | Mike Slattery | Observable"}] 2d:Taa41,{ let list = html` ` yield list list.addEventListener("change", ()=>{ document.querySelector("#fname").value = document.querySelector("#selnames").value }) }2e:[] 2b:{"id":"0d049e4aa33177c6","slug":null,"title":"Google Fonts in Observable","thumbnail":"164c32a9da09186b0bb9873d2a8494acf3de535b5390b81ee051b8e361aedace","access_level":"public","create_time":"$D2023-12-02T03:59:44.060Z","update_time":"$D2023-12-02T04:02:34.556Z","view_time":null,"first_public_time":"$D2023-12-02T03:59:44.060Z","has_unpublished_edits":null,"fork":{"id":"f20ec940e5ca5819","slug":"google-fonts-in-observable","title":"Google Fonts in Observable","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1d28085143aea7e3","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":"pro_2024"},"version":79,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null}],"members":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Google Fonts in Observable","cells":[{"id":0,"value":"# Google Fonts in Observable\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## This is cool because\nNow all my content will use this nice font.\n\nAnd I can even do lists an other things that look nice.\nColleen Murphy-Dunning\nHolly Powell Kennedy\nLaura Barraclaugh\nAnika Singh Lemar\nDavid N. Schleicher\nKenneth Gillingham\nAnya Nakhmurina\nAnthony Acciavatti\nAnne Underhill\nVasilis Vasiliou\nGregory E. Sterling\nJeannette Ickovics\nMark Bradford\nJames Hassell\nJodi Sherman\nIfe Vanable\nAlan Plattus\nAndrei Harwell\nDrew Gentner\nJoel Sanders\nMushfiq Mobarak\nKathleen Duffany\nMark Ashton\nAllison P. Harris\nBradford S. Gentry\nKate Cooney\nJessica Bacher\nZachary Liscow\nGaboury Benoit\nGerald Torres\nDavid Kooris\nLaRon E. Nelson\nNyeema Harris\nRobert Dubrow\nDavid Vlahov\nStephen Pitti\nMiraj U. Desai\nDanya Keene\nDeborah Berke\nMohamed Aly Etman\nElihu Rubin\nMorgan Grove\nMae-ling Lokko\nAnna Dyson\nSebastian Ruth\nJoseph B. Rose\nBarbara Reck\nKai Chen\nSarah Lowe\nMichelle Bell\nKaren Seto\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"{\n let theform = html`\n

Forms look nice too!

\nName \n

( Try putting Pattaya or Dancing Script and click change - use any name from Google Fonts)

\n`\n yield theform; // this makes sure the HTML is there before we try to add event listeners\n document.querySelector(\"#change\").addEventListener(\"click\", changeFont)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"Or choose one of these which will fill in the name field.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"mutable fontName = \"Poppins\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"changeFont = ()=>{\n console.log(\"changefont\")\n mutable fontName = document.querySelector(\"#fname\").value\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"