diff --git a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
index 3d06af2633608efd024b5c63801b421c18877e9c..96f9884e1380deb24ba019c47a48f331a34499e4 100644
--- a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
+++ b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
@@ -1,8 +1,15 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
+import { th } from '@pubsweet/ui-toolkit';
 import NoteNumber from './NoteNumber';
 
+const fontWriting = css`
+  font-family: ${th('fontWriting')};
+  font-size: ${th('fontSizeBase')};
+  color: ${th('colorText')};
+`;
+
 const NoteEditorContainerStyled = styled.div`
   display: flex;
   flex-direction: row;
@@ -10,6 +17,8 @@ const NoteEditorContainerStyled = styled.div`
   width: 100%;
   position: relative;
   margin-bottom: 5px;
+
+  ${fontWriting};
 `;
 
 const NoteStyled = styled.div`
diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
index 7445f6af8bcd896feaa26e5e94a1a374a3271609..6101c3d50fcd0b31e65db6cb7c77efaa63c497f0 100644
--- a/wax-prosemirror-components/src/ui/buttons/MenuButton.js
+++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
@@ -37,6 +37,7 @@ const Wrapper = styled.button.attrs(props => ({
   border-radius: 2px;
   cursor: pointer;
   font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBase')};
   height: 28px;
   outline: none;
   padding: 2px;
diff --git a/wax-prosemirror-layouts/src/layouts/EditorElements.js b/wax-prosemirror-layouts/src/layouts/EditorElements.js
index b830a18428652b2696ef16b2f04527137b54411a..2e59c31e74bac3e14402a8be3b6f3db086225703 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -4,12 +4,17 @@ import { th } from '@pubsweet/ui-toolkit';
 
 /* All styles regarding ProseMirror surface and elements */
 
+const fontWriting = css`
+  font-family: ${th('fontWriting')};
+  font-size: ${th('fontSizeBase')};
+  color: ${th('colorText')};
+`;
+
 export default css`
   .ProseMirror {
     background: white;
     counter-reset: footnote;
-    font-family: ${th('fontWriting')};
-    color: ${th('colorText')};
+    ${fontWriting}
 
     p::selection,
     p span::selection {
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index e8c87ea4b0e668c5204ce4e3ddb9d6686bf565bb..ff2c20030e2ce9ad85d6d7f5fca99d5b0541fce0 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -28,6 +28,7 @@ const divider = css`
 const Wrapper = styled.div`
   background: ${th('colorBackground')};
   font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBase')};
 
   display: flex;
   flex-direction: column;
diff --git a/wax-prosemirror-themes/package.json b/wax-prosemirror-themes/package.json
index b7995221b207c0098907fc2f4ff6671269e3e6a5..745cd0048026b8cc6610b29d24624c98f3b05da2 100644
--- a/wax-prosemirror-themes/package.json
+++ b/wax-prosemirror-themes/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@pubsweet/ui-toolkit": "^2.2.13",
     "cokourier-prime-sans": "git+https://gitlab.coko.foundation/julientaq/cokourier-sans-prime.git",
+    "fontsource-merriweather": "^3.0.9",
     "typeface-fira-sans-condensed": "^0.0.54",
     "typeface-vollkorn": "^0.0.54"
   }
diff --git a/wax-prosemirror-themes/src/coko-theme/index.js b/wax-prosemirror-themes/src/coko-theme/index.js
index 96d3fe6a01f844f3ca5c11d3bbcd7b50a044401d..145d212fc9651ecd59e586d3a231894b3d4dcc87 100644
--- a/wax-prosemirror-themes/src/coko-theme/index.js
+++ b/wax-prosemirror-themes/src/coko-theme/index.js
@@ -1,6 +1,7 @@
 /* eslint-disable import/extensions */
 import 'typeface-fira-sans-condensed';
-import 'typeface-vollkorn';
+import 'fontsource-merriweather';
+// import 'typeface-vollkorn';
 
 import { css } from 'styled-components';
 
@@ -19,19 +20,17 @@ const cokoTheme = {
   colorTextPlaceholder: '#595959',
   colorWarning: '#ffc107',
 
-  /*Buttons*/
-  colorButton: '#777',
   /* Text variables */
 
   // fonts
   fontInterface: 'Fira Sans Condensed',
   fontHeading: 'Fira Sans Condensed',
   fontReading: 'Vollkorn',
-  fontWriting: 'Vollkorn',
+  fontWriting: 'Merriweather',
 
   // font sizes
-  fontSizeBase: '16px',
-  fontSizeBaseSmall: '14px',
+  fontSizeBase: '14px',
+  fontSizeBaseSmall: '12px',
   fontSizeHeading1: '40px',
   fontSizeHeading2: '36px',
   fontSizeHeading3: '28px',
diff --git a/yarn.lock b/yarn.lock
index 9235c2621dd9be14b468abe17233c41cba286951..35232c3321a73b8fcdcb18a999124975425db854 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8186,6 +8186,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
   integrity sha512-tmRv0AVuR7ZyouUHLeNSiO6pqulF7dYa3s19c6t+wz9LD69/uSzdMxJ2S91nTI9U3rt/IldxpzMOFejp6f0hjg==
 
+fontsource-merriweather@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/fontsource-merriweather/-/fontsource-merriweather-3.0.9.tgz#c170a179e332a530c5308274fe4a7fde7cf7e3ab"
+  integrity sha512-ugq1m28EGWW1oNltVs0Ewl5p6KTX/8yNqMzBQ26G8S4hs4gLkKuSi+3nogM4PwF0AkGtT9PobSUkNUf4Noxg9w==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"