Un banco de fuentes

¡Holix!

Dudaba si poner esto en comunidad, en colaboraciones o en debates. Al final, lo he puesto en herramientas porque es lo que son :slight_smile:

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?

5 Me gusta

Me parece muy en la línea de “cultura libre” que estamos discutiendo en otro hilo… :smiley:

Me parece bien! Qué software usarías para montarlo? HTML puro?

1 me gusta

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”.

2 Me gusta

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).

1 me gusta

Me parece muy buen idea tener esos recursos bien listados. Por mi adelante!

2 Me gusta

Por mi también!

1 me gusta

Por mi excelente!
Os comparto un par de proyectos afines a esto que queremos hacer:

3 Me gusta

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

2 Me gusta

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:

https://gamifi.cat/dev/fonts-anartist.html

2 Me gusta

Cómo movemos con esto… estaría bueno hacer una lista y luego la ponemos con la interfaz que queramos?

1 me gusta

Puedes venir el jueves a l’Antartic? Si es que sí, igual lo podemos hablar allí. Si no, seguimos en asincrónico.

1 me gusta

Dale! creo que sí me puedo pasar <3

2 Me gusta

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:

  1. Bitter Bitter Font Free by Sol Matas » Font Squirrel
  2. EB Garamond EB Garamond Font Free by Georg Duffner » Font Squirrel
  3. Sligoil Sligoil - Velvetyne
  4. Source Sans Source Sans Pro Font Free by Adobe » Font Squirrel
  5. Terminal Grotesque Terminal Grotesque - Velvetyne
  6. Atkinson Hyperlegible Download the Atkinson Hyperlegible Font | Braille Institute

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

1 me gusta

ReHoli

Contenido del fichero

Aquí un fichero comprimido con:

  • 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

Enlace al fichero:
https://cloud.anartist.org/f/1225529

(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…

2 Me gusta

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é :smile_cat:
Muchas gracias por la faena <3
Besos

2 Me gusta

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

Pues a ver este: Anartist Cloud

2 Me gusta

Ahora sí puedo verlo!
Trabajazo <3 voy a ponerle los estilos de anartist y lo subo por acá

2 Me gusta