Skip to content

Commit

Permalink
Adding offline fonts
Browse files Browse the repository at this point in the history 
added the fonts locally meaning no internet is needed and it can be completly offline if need be. I am using the font 'Roboto Mono'.
  • Loading branch information
@sulaymaanajmal
sulaymaanajmal committed Aug 3, 2023
1 parent 2758191 commit 0a8406d
Show file tree
Hide file tree
Showing 38 changed files with 305 additions and 10 deletions.
304 changes: 304 additions & 0 deletions fonts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,304 @@
/* roboto-100 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-100italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: italic;
font-weight: 100;
src: url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
src: url('../fonts/roboto-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto';
font-style: italic;
font-weight: 900;
src: url('../fonts/roboto-v30-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}












/* roboto-mono-100 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 100;
src: url('../fonts/roboto-mono-v22-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-100italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 100;
src: url('../fonts/roboto-mono-v22-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-200 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 200;
src: url('../fonts/roboto-mono-v22-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-200italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 200;
src: url('../fonts/roboto-mono-v22-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 300;
src: url('../fonts/roboto-mono-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 300;
src: url('../fonts/roboto-mono-v22-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-mono-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 400;
src: url('../fonts/roboto-mono-v22-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 500;
src: url('../fonts/roboto-mono-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 500;
src: url('../fonts/roboto-mono-v22-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 600;
src: url('../fonts/roboto-mono-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 600;
src: url('../fonts/roboto-mono-v22-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 700;
src: url('../fonts/roboto-mono-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: italic;
font-weight: 700;
src: url('../fonts/roboto-mono-v22-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}












/* handjet-100 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 100;
src: url('../fonts/handjet-v17-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-200 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 200;
src: url('../fonts/handjet-v17-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 300;
src: url('../fonts/handjet-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 400;
src: url('../fonts/handjet-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 500;
src: url('../fonts/handjet-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 600;
src: url('../fonts/handjet-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 700;
src: url('../fonts/handjet-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 800;
src: url('../fonts/handjet-v17-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* handjet-900 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Handjet';
font-style: normal;
font-weight: 900;
src: url('../fonts/handjet-v17-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-100.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-200.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-300.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-500.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-600.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-700.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-800.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-900.woff2
View file
Binary file not shown.
Binary file added fonts/handjet-v17-latin/handjet-v17-latin-regular.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-regular.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-100.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-100italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-300.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-300italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-500.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-500italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-700.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-700italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-900.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-900italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2
View file
Binary file not shown.
Binary file added fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2
View file
Binary file not shown.
9 changes: 0 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,6 @@
<link rel="stylesheet" href="style.css">
<script>src = "script.js"</script>
<!-- Linking Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>Lite Music Player</title>
</head>

Expand Down
2 changes: 1 addition & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

/* Global styles */
body {
font-family: Handjet, cursive;
font-family: 'Roboto Mono', monospace;
margin: 0;
padding: 0;
background-color: var(--backgroundLight) !important;
Expand Down

0 comments on commit 0a8406d

Please sign in to comment.