¡Holix!
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.
¿Cómo lo veis?
Me parece muy en la línea de “cultura libre” que estamos discutiendo en otro hilo… 
Me parece bien! Qué software usarías para montarlo? HTML puro?
Sí, además, sería útil para otras personitas que no estén en la comunidad. wing-wing jeje
Sí, sí, lo más rupestre posible.
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”.
No lo sé, lo podemos mirar. Aunque en algún momento se puede tomar esa responsabilidad sin que implique más trabajo…
EDIT: revisando, creo que te puedo crear una usuaria de ftp sólo para ese dominio (y no el resto de anartist).
Me parece muy buen idea tener esos recursos bien listados. Por mi adelante!
Por mi también!
Por mi excelente!
Os comparto un par de proyectos afines a esto que queremos hacer:
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>
Besis
Holi!
Yo también había hecho uno pero un poco más rupestre. No sé hacer lo de copiar, lo suelto aquí para que se vea:
Cómo movemos con esto… estaría bueno hacer una lista y luego la ponemos con la interfaz que queramos?
Puedes venir el jueves a l’Antartic? Si es que sí, igual lo podemos hablar allí. Si no, seguimos en asincrónico.
Dale! creo que sí me puedo pasar <3
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:
Fuentes que tengo duda de la licencia:
7. Zilla Zilla Slab Font Free by Typotheque » Font Squirrel (De Mozilla Fundation)
8. Rakkas GitHub - zeynepakay/Rakkas
9. Inconsolata GitHub - googlefonts/Inconsolata: Development repo of Inconsolata Fonts by Raph Levien
10. Ubuntu font Ubuntu font
[EDIT] Recupero también esta conversación sobre una tipografía chula en el foro Tipografia libre y anarquista
ReHoli
Aquí un fichero comprimido con:
Enlace al fichero:
https://cloud.anartist.org/f/1225529
(Cuando estén las fuentes en su sitio lo borraré).
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?
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
No sé si el enlace es correcto, @titi , a mi me lleva a mi Inicio del cloud y en la url aparece un “FileNotFound”…
Me parece bien que sea algo colectivo y se genere un protocolo! Cuando vea el css igual aporto algo más interesante… jejeje
Ahora sí puedo verlo!
Trabajazo <3 voy a ponerle los estilos de anartist y lo subo por acá