Add Rubik font family

This commit is contained in:
Guntis Smaukstelis
2023-08-08 19:50:19 +03:00
parent 1d6293f698
commit d6cc56e789
4 changed files with 20 additions and 9 deletions
+1
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<link rel="preload" href="/src/assets/Rubik-Medium.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
<title><{ VITE_APP_TITLE }></title>
</head>
<body>
+5 -5
View File
@@ -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);
}
Binary file not shown.
+14 -4
View File
@@ -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 {