Add Rubik font family
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user