29:null 2a:["$","title",null,{"children":"Google Fonts in Observable | Andrew Wooldridge | Observable"}] 2f:Taa41,{ let list = html` ` yield list list.addEventListener("change", ()=>{ document.querySelector("#fname").value = document.querySelector("#selnames").value }) }30:[] 2d:{"id":"f20ec940e5ca5819","slug":"google-fonts-in-observable","title":"Google Fonts in Observable","thumbnail":"027b87e79455742fda2f727069f27437d888741a5ce7226ebe617f4aa79b4011","access_level":"public","create_time":"$D2021-05-21T23:05:17.587Z","update_time":"$D2021-05-21T23:40:28.433Z","view_time":null,"first_public_time":"$D2021-05-21T23:26:43.816Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":75,"publish_version":75,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"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.\n* One\n* Two\n* Three\n* And on and on","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":"$2f","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":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"