About
Octopus Deploy is moving away from using the Roboto font family to standard operating system-based fonts in the Portal UI.
Why
The Octopus Deploy product will align with the updated brand directive regarding system fonts. This update will extend to all parts of the Portal UI, from basic text and headings to code snippets that use monospace variants.
System Fonts will be introduced in late 2024.
The success of this change will allow:
- Mac OS users to view Portal using system font SF Pro and monospace font SF Mono or Menlo (OS dependant)
- Windows OS users to view Portal using system font Segoe UI and monospace font Consolas
- Linux OS users to view Portal using system font depending on Linux distribution:
- for Ubuntu distribution: Ubuntu and monospace font Ubuntu Mono
- for KDE distribution: Oxygen Sans and monospace font Oxygen Mono
- for all other distributions, the font will default to sans-serif and monospace font Liberation Mono (fallback monospace)
Our CSS font stacks
All standard UI text will use the following font stack:
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI","Oxygen Sans",Ubuntu,sans-serif,Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
Monospace and code text will use the following font stack:
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace;Using system fonts in your work
- Designers can access and consume the new fonts in Figma via Foundations shared library styles to utilize and test their concepts
- Engineers can access and apply the font theme tokens via the code base
- Engineers and designers can access the Developer Tool panel in Deploy via the keyboard shortcut ctrl + shift + ~. From there, you can select the Override Font tab to switch between font families (excluding monospace fonts) and simulate cross-operating system tests.
Note: the Developer Tool panel will also require installing these fonts on your local machine. If you do not have Segoe UI or SF Pro on your machine you can request them via the IT Request Form under “Fonts”. Ubuntu and Oxygen are also available from Google Fonts.