diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
index 350321d..2a0f00a 100644
--- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
@@ -9,6 +9,7 @@ const Container = styled.div`
   user-select: none;
   box-sizing: border-box;
   font-family: 'Tonka';
+  font-variation-settings: 'wght' 800;
   ${pointerEventsAutoInNormalMode};
   /* box-shadow: 1px 2px 10px -5px black; */
 
diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
index 8d6b893..19c5baa 100644
--- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
@@ -89,6 +89,7 @@ const InputContainer = styled.div`
   flex-grow: 0;
   padding-bottom: 4px;
   padding-top: 4px;
+  font-variation-settings: 'wght' 800;
 `
 
 type ISingleRowPropEditorProps<T> = {
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index 1743481..d14bd98 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -32,6 +32,7 @@ const Header = styled(BaseHeader)`
   pointer-events: none;
   white-space: nowrap;
   font-family: 'Tonka';
+  font-variation-settings: 'wght' 800;
   /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
 
   color: rgba(0, 0, 0, 0.8);
@@ -64,7 +65,7 @@ const Header = styled(BaseHeader)`
 `
 
 export const outlineItemFont = css`
-  font-weight: 500;
+  font-variation-settings: 'wght' 800;
   font-size: 12px;
   & {
   }
diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
index e041d50..95b97e0 100644
--- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
+++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
@@ -4,6 +4,6 @@ import {css} from 'styled-components'
 export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
   font-weight: 300;
   font-size: 12px;
-  font-variation-settings: 'wght' 130;
+  font-variation-settings: 'wght' 500;
   color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};
 `
diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
index 056cb10..65d64c7 100644
--- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
@@ -53,7 +53,7 @@ const Input = styled.input`
   border-radius: 0px;
   margin-bottom: 0px;
   text-align: center;
-  font-variation-settings: 'wght' 200;
+  font-variation-settings: 'wght' 700;
 
   &:focus {
     cursor: text;
diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx
index 9c3a3fd..9ed1a96 100644
--- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx
@@ -32,6 +32,7 @@ const Select = styled.select`
   text-align: left;
   width: 100%;
   border-radius: 0px;
+  font-variation-settings: 'wght' 700;
   /*
   looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why.
   So we're hard-coding the height to 26px, unlike all other inputs that use a relative height.
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
index 527807a..4dd2f0d 100644
--- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -21,7 +21,7 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})`
   box-sizing: border-box;
   margin-bottom: 10px;
   margin-top: 10px;
-  font-variation-settings: 'wght' 200;
+  font-variation-settings: 'wght' 700;
 
   &:hover {
     background-color: #10101042;
diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
index a56d667..bdf2e09 100644
--- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
+++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
@@ -15,6 +15,7 @@ const ItemContainer = styled.li<{enabled: boolean}>`
   font-weight: 400;
   position: relative;
   font-family: 'Tonka';
+  font-variation-settings: 'wght' 800;
   text-transform: uppercase;
   color: ${(props) => (props.enabled ? 'white' : '#484848')};
   cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};