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