diff --git a/web/index.html b/web/index.html
index d7f09bc..bf8682e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,6 +5,7 @@
+
<{ VITE_APP_TITLE }>
diff --git a/web/src/aggregator/map/MapView.tsx b/web/src/aggregator/map/MapView.tsx
index 060a286..b2fb9ba 100644
--- a/web/src/aggregator/map/MapView.tsx
+++ b/web/src/aggregator/map/MapView.tsx
@@ -81,7 +81,7 @@ function drawOnMap(
ctx.fill();
// weather values
- ctx.font = "bold 30px Arial";
+ ctx.font = "bold 30px Rubik";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#000000";
@@ -91,7 +91,7 @@ function drawOnMap(
});
// wind values
- ctx.font = "bold 45px Arial";
+ ctx.font = "bold 45px Rubik";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillStyle = "#FFFFFF";
@@ -104,12 +104,12 @@ function drawOnMap(
const speedWidth = ctx.measureText(windData[1]).width;
ctx.fillText(windData[1], boxMiddleX - speedWidth / 2 - 30, 575);
- ctx.font = "bold 25px Arial";
+ ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", boxMiddleX + speedWidth / 2 - 22, 590);
- ctx.font = "bold 45px Arial";
+ ctx.font = "bold 45px Rubik";
const gustsWidth = ctx.measureText(windData[2]).width;
ctx.fillText(windData[2], boxMiddleX - gustsWidth / 2 - 30, 790);
- ctx.font = "bold 25px Arial";
+ ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", boxMiddleX + gustsWidth / 2 - 22, 805);
}
\ No newline at end of file
diff --git a/web/src/assets/Rubik-Medium.ttf b/web/src/assets/Rubik-Medium.ttf
new file mode 100644
index 0000000..c0b7965
Binary files /dev/null and b/web/src/assets/Rubik-Medium.ttf differ
diff --git a/web/src/css/index.css b/web/src/css/index.css
index 84d23a4..64d6cf3 100644
--- a/web/src/css/index.css
+++ b/web/src/css/index.css
@@ -1,23 +1,33 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+ font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+h1, h2, h3, h4 {
+ font-family: 'Rubik', sans-serif;
+}
+
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+@font-face {
+ font-family: 'Rubik';
+ src: url('../assets/Rubik-Medium.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
.primary {
background-color: #ffcc66;
border: none;
- font-weight: bold;
padding: 5px 10px;
cursor: pointer;
+ font-family: 'Rubik', sans-serif;
}
.primary:hover {