CSS templates and Google fonts

Dashboard
1

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

<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

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):

<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;
}
2

Use a UI scoped template

<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
image455Ă—523 14.4 KB

image

[{"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"}}]
1 Like
3

You mean Widget (UI-Scoped) ?

Yes that works, as my first example shows.

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

4

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

5

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?

6

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

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? :stuck_out_tongue:

7

Thanks for that assessment of my questions.