Dudaba si poner esto en comunidad, en colaboraciones o en debates. Al final, lo he puesto en herramientas porque es lo que son
Mi propuesta es crear un banco de fuentes bajo un subdominio tipo: “fonts.anartist.org”. Ahí solo pondría fuentes libres, claro. Y empezaría con la Atkinson, la Libre Baskerville y algunas otras que uso. También se podría crear un formulario para proponer fuentes que necesitamos usar e irlas añadiendo.
Pues si a alguien más le parece una buena idea (supongo que sí) puedo redirigir el dominio y creamos un espacio en el hestiacp. Como es algo comunitario, lo haría des de la cuenta “anartist”.
Pues a ver si alguien más expresa su parecer de forma positiva y se puede tirar para adelante. Creo que, para cositas ligeras como esta decisión, se podría aplicar “la regla de los tres activistas” (con tres personas que estén de acuerdo, palante).
Okis. ¿Podría tener acceso solo a ese directorio? No quiero rol de “admin todopoderoso”.
Hola gente linda
Bueno como soy un maldito azotau, hice esta pequeña plantilla que incluye los estilos de nuestra web y un componente con la muestra de las fuentes.
Mi duda es si mostraremos cada fuente pues tendríamos que cargar muchas fuentes en una misma página…que igual no es tanto drama pero tardará un pelín en cargar la página
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts Anartist</title>
<style>
/*-----------------------------------------------------------------------------------*/
/*Main*/
/*-----------------------------------------------------------------------------------*/
:root {
--bgColor: #111923;
--bgDarkColor: #0c1212;
--fontColor: #ffffff;
--primaryColor: #078274;
--secondaryColor: #029996;
--highlightColor: #1e6bf0;
}
body, html {
background: var(--bgColor);
color: var(--fontColor);
font-family: "Ubuntu Sans", sans-serif;
font-size: 16px;
line-height: 1.4;
margin: 0;
padding: 0;
}
@media (min-width: 1441px) {
body, html {
font-size: 18px
}
}
a {
color: var(--primaryColor);
text-decoration: none;
}
a:hover {
color: var(--secondaryColor);
}
input,
textarea,
select,
button {
outline: 0;
border: 0;
font-size: 1rem;
font-family: "Ubuntu Sans", sans-serif;
width: calc(100% - 1rem);
padding: 0.5rem;
}
input[type=checkbox],
input[type=text],
input[type=email],
input[type=tel],
input[type=file],
input[type=password],
input[type=number],
select,
textarea {
border-radius: 8px;
height: calc(56px - 1rem);
border: 1px solid var(--fontColor);
background: var(--bgColor);
color: var(--fontColor);
}
input[type=radio] {
width: initial;
}
textarea {
height: 90px;
}
.btn,
a.btn,
input[type=submit] {
border-radius: 8px;
cursor: pointer;
display: inline-block;
padding: 1rem;
width: auto;
transition: all .5s ease;
}
.btn-outline {
color: var(--secondaryColor);
border: 1px solid var(--secondaryColor);
cursor: pointer;
display: inline-block;
padding: 1rem;
width: auto;
}
.btn-outline:hover,
.btn-outline:hover a {
background: var(--secondaryColor);
color: var(--fontColor);
}
.btn-primary,
input[type=submit]{
background: var(--highlightColor);
color: var(--fontColor);
}
.btn-primary:hover,
input[type=submit]:hover {
background: var(--primaryColor);
color: var(--fontColor);
}
.btn-secondary {
background: var(--primaryColor);
color: var(--fontColor);
}
.btn-primary:hover {
background: none;
border: 1px solid var(--primaryColor);
color: var(--primaryColor);
}
/* Font */
blockquote {
color: #bdbdc2;
font-style: italic;
font-size: 1.1875rem;
line-height: 2
}
cite {
font-weight: bold;
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
font-family: "Atkinson Hyperlegible", sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0
}
.big {
font-size: 2.625rem;
}
h1, .h1 {
font-size: 1.875rem;
}
h2, .h2 {
font-size: 1.5rem;
}
h3, .h3 {
font-size: 1.25rem;
}
h4, .h4 {
font-size: 1.1rem;
}
hr {
background: var(--fontColor);
outline: 0;
border: 0;
height: 2px;
margin: 4rem auto;
max-width: 400px;
}
iframe {
border-radius: 8px;
background: #fff;
padding: 1rem;
margin: 2rem 0;
}
.text-uppercase {
text-transform: uppercase;
}
/*-----------------------------------------------------------------------------------*/
/*Grid*/
/*-----------------------------------------------------------------------------------*/
.container {
margin: 0 auto;
max-width: 65rem;
width: 100%;
}
.container_sm.container {
max-width: 60rem;
}
.container_mini.container {
max-width: 35rem;
}
.container_big.container {
max-width: 75rem;
}
.row_plus {
display: flex;
align-content: space-between;
}
@media (min-width: 800px) {
.row {
display: flex;
flex-wrap: wrap;
margin-left: -1rem;
margin-right: -1rem
}
.col {
margin: 1rem;
}
.col-70 {
width: calc(70% - 2rem);
}
.col-60 {
width: calc(60% - 2rem);
}
.col-50 {
width: calc(50% - 2rem);
}
.col-40 {
width: calc(40% - 2rem);
}
.col-30 {
width: calc(30% - 2rem);
}
.col-33 {
width: calc(33% - 2rem);
}
.col-20 {
width: calc(20% - 2rem);
}
}
/*-----------------------------------------------------------------------------------*/
/*Modules*/
/*-----------------------------------------------------------------------------------*/
.b-top {
border-top: 1px solid var(--fontColor);
}
.b-bottom {
border-bottom: 1px solid var(--fontColor);
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.bg-dark {
background: var(--bgDarkColor);
overflow: hidden;
}
.separatorz {
margin-bottom: 2.5rem;
margin-top: 2.5rem;
}
.padded {
padding: 1rem
}
.m-bottom {
margin-bottom: 2rem
}
.m-bottom-mini {
margin-bottom: 0.5rem
}
.m-top {
margin-top: 1.5rem!important
}
.m-top-mini {
margin-top: 0.5rem!important
}
.d-none {
display: none;
}
/*-----------------------------------------------------------------------------------*/
/*Cardz*/
/*-----------------------------------------------------------------------------------*/
.cardz {
border-radius: 6px;
border: 1px solid var(--fontColor);
padding: 1rem;
}
.cardz_header {
border-bottom: 1px solid var(--fontColor);
}
/*-----------------------------------------------------------------------------------*/
/*Fonts*/
/*-----------------------------------------------------------------------------------*/
.font__Bitter,
.font__Bitter * {
font-family: 'Bitter', serif;
}
.font__clearsans,
.font__clearsans * {
font-family: 'Clear Sans', sans-serif;
}
</style>
</head>
<body>
<header class="header__main bg-dark">
<div class="container">
<div class="padded">
<h1>Fuentes libres para creadoras libres</h1>
</div>
</div>
</header>
<main class="main__main">
<div class="container">
<div class="row">
<div class="col col-50">
<article class="cardz font__Bitter">
<div class="cardz_header">
<h3>Bitter</h3>
<h4>Serif</h4>
<a href="https://www.fontsquirrel.com/fonts/bitter" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__clearsans">
<div class="cardz_header">
<h3>Clear sans</h3>
<h4>Sans serif</h4>
<a href="https://www.fontsquirrel.com/fonts/clear-sans" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
<div class="col col-50">
<article class="cardz font__empty">
<div class="cardz_header">
<h3>Name font</h3>
<h4>Style</h4>
<a href="#" target="_blank" rel="noopener noreferrer">Enlace para descargar</a>
</div>
<p>a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p class="text-uppercase">a b c ç d e f g h i j k l m n ñ o p q r s t u v w x y z</p>
<p>à á ä è é ë í ì ï ó ò ö ú ù ü </p>
<p class="text-uppercase">à á ä è é ë í ì ï ó ò ö ú ù ü </p>
</article>
</div>
</div>
</div>
</main>
<footer class="footer__main bg-dark">
<div class="container">
<div class="padded">
<p>Página web construida con ♥ y software libre</p>
</div>
</div>
</footer>
</body>
</html>
Lo hablado @titi puedes usar los estilos de acá para hacer la web o copiar lo que quieras del codigo de arriba, cuando tengamos las fuentes en nuestro nuevo proyecto las cambio en la web <3 <3
Las fuentes que me apetecería que aparecieran serían:
index.html (cabeceras h2 con ejemplo en minúscula y mayúscula, versiones de la tipografía, enlace de descarga de la fuente y peso)
style.css (solo fuentes)
directorios y ficheros comprimidos de: Alex Brush, Atkinson Hyperlegible, Bitter, Century Schoolbook L, EB Garamond, Libre Baskerville, Sligoil, Source Sans Pro, Terminal Grotesque
(Cuando estén las fuentes en su sitio lo borraré).
Mini-protocolo
He acabado de fuentes hasta el moño…
Sería ideal tener un mini-protocolo para añadirlas y así no se lo carga una sola persona. No sé dónde van a estar ni quién va a tener acceso, pero creo que sería saludable que quien proponga una fuente redacte también el css (que es lo tedioso y solo una fuente de todas las que he puesto lo llevaba). Quizás quien lo suba puede añadir el html (que es lo fácil).
No sé, ¿cómo lo veis?
Variedad
Hay algunas que, -además de bold, bold italic, italic, regular-, tienen de más gruesas y más finas. Yo no controlo tanto… Así que cuando había muchas solo he puesto esas cuatro versiones. Las demás, que existen en el fichero comprimido pero no en el css, las he puesto entre paréntesis en la descripción del HTML. No sé si me explico…
Super!
Solo una cosa, no puedo entrar al cloud…cuál es la contraseña?
Sobre el mini-protocolo, no sé si añadiremos más fuentes pero sería seguir los mismos css que has usado y sobre la variedad no me aclaro, supongo que cuando vea los archivos lo entenderé
Muchas gracias por la faena <3
Besos