Miscellaneous

Using System-Appropriate Fonts

Different platforms come with many preinstalled fonts that can be used by your application's UI. For reasonable defaults, we recommend the following cross-browser stacks (as recommended by Tailwind):

Type	Stack
Sans	`ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Serif	`ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;`
Mono	`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`

While these defaults are great for providing a consistent experience across platforms, you may sometimes wish to prefer a certain font stack on specific platforms. For example, it may be preferable for fonts on Mac devices to load with a priority of -apple-system, ui-sans-serif, system-ui....

To handle these cases, ToDesktop adds a todesktop and a todesktop-platform-[platform] class to the html element on each page of your app. If you wish to specify a different font priority for Mac, you can do the following:

        /* handles mac, windows, and linux distros */
html.todesktop {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* override mac handling */
html.todesktop-platform-darwin {
  font-family: -apple-system, ui-sans-serif, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}

/* override windows handling */
html.todesktop-platform-win32 {
  /* ... */
}

INFO

The html.todesktop class pre-selector will ensure that the css is only applied when running as a desktop app. For more information on custom CSS in ToDesktop apps, see our detailed guide.

As is common on the web, you can also use the @font-face rule to specify native fonts:

        @font-face {
  font-family: 'YourFontName'; /*a name to be used later*/
  src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}

@font-face rules cannot be declared within a CSS selector, so the following would not work:

        html.todesktop-platform-darwin {
  @font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
  }
}

Native fonts to be used with the @font-face rule can be downloaded from the platform provider:

Mac fonts.
Windows fonts.