Fix fonts on documentation site (#87)

* fix: Fix regular Suisse font, add medium and semibold fonts

* docs: Update README

* fix: Use medium (instead of semibold) for coloraxis title

* docs: Update README

Author: wasimxyz

Makefile

@@ -58,3 +58,7 @@ build-and-publish: build
 	poetry publish \
 		--username __token__ \
 		--password ${POETRY_PYPI_TOKEN_PYPI}
+
+.PHONY: preview-docs
+preview-docs:
+	poetry run mkdocs serve

README.md

@@ -61,7 +61,25 @@ pytest -k barplots --output-dirpath ./test-outputs
 
 Some of the documentation is in the form of Jupyter notebooks. The inline graphical outputs of these notebooks are part of the documentation, so these notebooks are committed to the repo with their outputs included. It is therefore important to keep the notebook outputs up-to-date by re-running all of the notebooks when changes are made to the package.
 
-Run the makefile command `execute-all-notebooks` to execute all the notebooks. This 1) ensures that the notebooks execute without errors and 2) updates their outputs in-place. Then, commit any modified notebooks to the repo.
+Run the following command to execute all the notebooks:
+
+```sh
+make execute-all-notebooks
+```
+
+This 1) ensures that the notebooks execute without errors and 2) updates their outputs in-place. Then, commit any modified notebooks to the repo.
+
+## Updating the documentation site
+
+We use [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) to build the documentation site. Everything can be found in the [`docs/`](docs/) directory.
+
+You can use the following command to preview your changes as you make them:
+
+```sh
+make preview-docs
+```
+
+Additionally, this repo has a [GitHub Actions workflow](.github/workflows/deploy-mkdocs-site.yml) for building the documentation site and publishing it to GitHub Pages. It's triggered on pushes to main.
 
 ## Publishing a new version of the package on PyPI
 

arcadia_pycolor/style_defaults.py

@@ -203,7 +203,7 @@
             ticks="outside",
             tickfont=dict(family=MONOSPACE_FONT_PLOTLY, size=MONOSPACE_FONT_SIZE),
             title=dict(
-                font=dict(family=f"{DEFAULT_FONT_PLOTLY}-SemiBold", size=BASE_FONT_SIZE),
+                font=dict(family=f"{DEFAULT_FONT_PLOTLY}-Medium", size=BASE_FONT_SIZE),
                 side="right",
             ),
         ),

docs/stylesheets/extra.css

@@ -1,11 +1,27 @@
 @font-face {
-	font-family: "SuisseIntl-Regular";
+	font-family: "SuisseIntl";
 	src: url("https://www.arcadiascience.com/fonts/SuisseIntl-Regular.woff2")
 		format("woff2");
 	font-weight: normal;
 	font-style: normal;
 }
 
+@font-face {
+	font-family: "SuisseIntl-Medium";
+	src: url("https://www.arcadiascience.com/fonts/SuisseIntl-Medium.woff2")
+		format("woff2");
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "SuisseIntl-SemiBold";
+	src: url("https://www.arcadiascience.com/fonts/SuisseIntl-SemiBold.woff2")
+		format("woff2");
+	font-weight: normal;
+	font-style: normal;
+}
+
 @font-face {
 	font-family: "SuisseIntl-Thin";
 	src: url("https://www.arcadiascience.com/fonts/SuisseIntl-Thin.woff2")
@@ -48,7 +64,7 @@
 
 :root {
 	/* Fonts. */
-	--md-text-font: "SuisseIntl-Regular", Roboto, Helvetica, Arial, sans-serif;
+	--md-text-font: "SuisseIntl", Roboto, Helvetica, Arial, sans-serif;
 	--md-code-font: "SuisseIntlMono", "Roboto Mono", "Liberation Mono", monospace;
 
 	/* Primary color shades. */