feat: add Gotham font files and integrate into styles

This commit is contained in:
2026-06-26 08:52:40 -03:00
parent def3a04548
commit 3c163e672b
18 changed files with 263 additions and 3 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,188 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="5;url=https://fontsgeek.com/gotham-font?ref=readme">
<title>GothamFontsgeek</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
background:#DDD;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary, .btn-secondary {
text-decoration:none;
color: #FFF;
background-color: #348eda;
padding:10px 20px;
font-weight:bold;
margin: 20px 10px 20px 0;
text-align:center;
cursor:pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary{
background: #aaa;
}
.last {
margin-bottom: 0;
}
.first{
margin-top: 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container{
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear:both!important;
}
.footer-wrap .container p {
font-size:12px;
color:#666;
}
table.footer-wrap a{
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3{
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
margin: 40px 0 10px;
line-height: 1.2;
font-weight:200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:20px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Gotham</h1>
<p>This font was downloaded from <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> . You can visit <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> for thousands of free fonts.</p>
<p><a href="http://fontsgeek.com/gotham-font?ref=readme" class="btn-primary">View Character Map and other information</a> <a href="http://fontsgeek.com?ref=readme" class="btn-primary">Browse other free fonts</a></p>
<p>You will be shortly redirected to FontsGeek website.</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td></td>
</tr>
</table>
<!-- /body -->
</body>
</html>

71
src/_fonts.scss Normal file
View File

@@ -0,0 +1,71 @@
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Thin.otf") format("opentype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Extra Light.otf") format("opentype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Book.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Italic.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Medium.otf") format("opentype");
font-weight: 500 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Bold Italic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url("/fonts/Gotham/Gotham Black.otf") format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}

View File

@@ -8,7 +8,8 @@
.btn {
min-height: 40px;
font-weight: 600;
font-weight: 400;
font-size:15px;
}
.btn-primary,

View File

@@ -1,10 +1,10 @@
@use "./fonts";
@import "./theme";
@import "../node_modules/bootstrap/scss/bootstrap";
:root {
--bs-body-font-family: "Gotham", sans-serif;
}