# CSS templates and Google fonts

**URL:** <https://discourse.nodered.org/t/css-templates-and-google-fonts/91237>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [24 September 2024 17:16 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237 "2024-09-24T17:16:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 September 2024 17:16 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/1 "2024-09-24T17:16:23Z")

</div>

I have discovered that I can include Google fonts in a Widget type template:

```auto
<template>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Water Brush">
    <div class="water">
        <h2>The Header</h2>
        <p>Blah, blah</p>
</template>
<style>
    .water h2 {
        font-family: "water brush", serif;
        font-size: 2em;
    }
</style>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/75d149f830ffbf3c64af20072385f0f85a426501.png)

How do I include the link to a google font in a CSS type template to style a normal ui widget? This does not work (If I remove the link and font-family, the size is styled, so the selector is correct):

```auto
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chivo Mono">

.nrdb-ui-text.digitalclock span.nrdb-ui-text-value {
    font-family: "Chivo Mono", serif;
    font-size: 2em;
}

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 September 2024 17:38 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/2 "2024-09-24T17:38:01Z")

</div>

> [@jbudd](#):
>
> How do I include the link to a google font in a CSS type template

Use a UI scoped template

```auto
<template>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Water Brush">
</template>
<style>
    .nrdb-ui-widget.nrdb-ui-text.water .nrdb-ui-text-label,
    .nrdb-ui-widget.nrdb-ui-text.water .nrdb-ui-text-value
     {
        font-family: "water brush", serif;
        font-size: 2em;
    }
</style>

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/5912a00c7e12f9e742fa04e1c72bb3fc6054f1f4.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/97d26a2c7dcab12259ae6d3ded4c379caf226c4a.png)

```auto
[{"id":"c515ca39c34c984d","type":"ui-template","z":"862ec766f2af6f61","group":"","page":"","ui":"22ea43815413e748","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Water Brush\">\n</template>\n<style>\n .nrdb-ui-widget.nrdb-ui-text.water .nrdb-ui-text-label,\n .nrdb-ui-widget.nrdb-ui-text.water .nrdb-ui-text-value\n {\n font-family: \"water brush\", serif;\n font-size: 2em;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":720,"y":880,"wires":[[]]},{"id":"05de879a911124cd","type":"ui-text","z":"862ec766f2af6f61","group":"b1da20a2d7d13012","order":0,"width":0,"height":0,"name":"","label":"I should be using water font","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"water","x":740,"y":920,"wires":[]},{"id":"22ea43815413e748","type":"ui-base","name":"base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"b1da20a2d7d13012","type":"ui-group","name":"Chart Tests","page":"94b0d43f03c8e17e","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"94b0d43f03c8e17e","type":"ui-page","name":"Chart Tests","ui":"22ea43815413e748","path":"/chart-tests","icon":"home","layout":"grid","theme":"c2ff5ba1f92a0f0e","order":9,"className":"","visible":"true","disabled":"false"},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#6771f4","bgPage":"#e5dcdc","groupBg":"#ffffff","groupOutline":"#d39292"},"sizes":{"pagePadding":"6px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"6px","density":"default"}}]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 September 2024 17:48 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/3 "2024-09-24T17:48:30Z")

</div>

> [@Steve-Mcl](#):
>
> Use a UI scoped template

You mean Widget (UI-Scoped) ?

Yes that works, as my first example shows.

So what _is_ the point of a CSS type template then?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 September 2024 19:08 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/4 "2024-09-24T19:08:46Z")

</div>

> [@jbudd](#):
>
> So what _is_ the point of a CSS type template then?

IIRC, that was added first.

Also, you get a much better editor xp due to the full CSS monaco support in CSS mode

![chrome_BEWDRlDJ6H](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e22a3f5f6c9da04d66c98ae009399cb6f51222ec.gif)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 September 2024 19:29 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/5 "2024-09-24T19:29:54Z")

</div>

Hmm. I suppose that's a bonus.

It doesn't seem to be adequate justification for a whole different kind of template with incompatible syntax.

Is Monaco not smart enough to be able to turn on CSS support in part of a template - such as between `style` tags, or at the touch of a button?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 September 2024 19:54 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/6 "2024-09-24T19:54:18Z")

</div>

> [@jbudd](#):
>
> It doesn't seem to be adequate justification for a whole different kind of template with incompatible syntax.

Its not incompatible syntax, it is regular CSS syntax (i.e. in a `.css` file you do NOT add `style` tags around your CSS)

> [@jbudd](#):
>
> Is Monaco not smart enough to be able to turn on CSS support in part of a template - such as between `style` tags, or at the touch of a button?

Not without a specific LSP for VUE (there is a task on the backlog but it is not simple or quick)

  
  

What happened to the _"Wouldn't like you to think I can only do negative"_ Mr jbudd? 😛

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 September 2024 20:20 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/7 "2024-09-24T20:20:59Z")

</div>

> [@Steve-Mcl](#):
>
> What happened to the _"Wouldn't like you to think I can only do negative"_ Mr jbudd? 😛

Thanks for that assessment of my questions.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 October 2024 20:21 UTC](https://discourse.nodered.org/t/css-templates-and-google-fonts/91237/8 "2024-10-24T20:21:34Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.