1

Tengo una consulta. Quiero hacer en mi panel un selector de las fuentes para que mi cliente pueda seleccionar que fuente usar en su sitio. Para estoy usando un archivo css que creo con PHP donde guardo en una variable CSS el nombre de la fuente y lo recupero en el css de estilos con font-family: var(--fuente_seleccionada);

Hasta aquí todo bien. Ahora lo que quiero hacer es un select donde aparezcan todas las fuentes con su previsualización de como es cada una para poder guardar el nombre de la misma en mi base de datos.

La consulta puntual es, ¿Cómo puedo hacer ese select ? O sea, ¿De dónde saco todos los nombres de las fuentes y cómo hago que cada una se vea como es la fuente realmente ?

Espero alguien pueda ayudarme.

Gracias

2
  • Hola, lo que yo haría sería, 1. leer el archivo css como un texto y ubicar las variables font-family, y ya, con eso por medio de javascript cambio el body (fiont-family: tu-fuente). tambien se me ocurre que podrías crear diferentes archivos CSS con las fuentes diferentes en cada uno y segun el selector, cargar dichos archivos. Commented el 23 mar. 2022 a las 20:55
  • Es que ese no es el problema. El tema es que no se de donde sacar todos los tipos de fuentes que se pueden utilizar en una web. Commented el 23 mar. 2022 a las 21:19

1 respuesta 1

1

te mostraré una solución que he encontrado a tú problema.

PRIMERO

Puedes sacar los tipos de fuente en Google Fonts que es un gran conjunto de estilos de letras que se pueden utilizar gratuitamente.

Entonces en tu archivo css harás esto.

/* Estilo Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

/*Estilo Inspiration */
@import url('https://fonts.googleapis.com/css2?family=Inspiration&display=swap');

/* Estilo Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');

SEGUNDO

Ya en tu select aplica el respectivo archivo CSS con las fuentes seleccionadas de Google Fonts. Lo que viene a continuación es un truco para crear el estilo de un select únicamente con CSS. ¿Por qué digo que es un truco? Porque solo hay unos pocos atributos de estilo que se pueden aplicar a un elemento . Esto se debe a que este tipo de elemento es un ejemplo de un "elemento reemplazado". Dependen del sistema operativo y no forman parte del HTML/navegador. No se puede diseñar a través de CSS.

El Truco (Basado en el artículo de Carlos Cuba):

https://carloscuba014.medium.com/building-a-custom-select-field-without-any-javascript-25c0f10cad53

/* Basado en el artículo de Carlos Cuba, https://carloscuba014.medium.com/building-a-custom-select-field-without-any-javascript-25c0f10cad53  */
/* Editado por Jack More */

/* Estilo Roboto */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

    /*Estilo Inspiration */
    @import url('https://fonts.googleapis.com/css2?family=Inspiration&display=swap');

    /* Estilo Poppins */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');

    /* Estilo Poppins Sans Serif */
    @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

    /* Estilo Oswald */
    @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');

    /* Estilo Smokum */
    @import url('https://fonts.googleapis.com/css2?family=Smokum&display=swap');

#dropdown {
  border: 1px solid #00b456;
  border-radius: 7px;
  color: black;
  cursor: pointer;
  height: 70px;
  outline: none;
  padding: 0 0 0 50px;
  width: 100%;
  overflow:hidden; 
}
#dropdown option {
  
  background-color: white; 
  color: black;
  height:100%; 
  overflow:hidden; 
}
#dropdown option:nth-child(2) {
  
  margin-top:20px; 
  margin-bottom:20px; 
  height: 100px;
  font-family: "Poppins", sans-serif;
  font-size:30px; 
}
#dropdown option:nth-child(3) {
 
  margin-top:20px; 
  margin-bottom:20px; 
  height: 100px;
  font-family: "Roboto ";
  font-size:30px; 
}
#dropdown option:nth-child(4) {
  
  margin-top:20px; 
  margin-bottom:20px; 
  height: 100px;
  
  font-family: "Inspiration";
  font-size:30px; 
}
#dropdown option:nth-child(5) {
  margin-top:20px; 
  margin-bottom:20px; 
  height: 100px;
  font-family: "Oswald";
  font-size:30px; 
}
#dropdown option:nth-child(6) {
  margin-top:20px; 
  margin-bottom:20px; 
  height: 100px;
  font-family:"Smokum"; 
  font-size:30px; 
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>     

<body>



<div id='select-container'>
  <select id='dropdown'>
    <option value='' disabled selected>Estilos</option>
    <option>Poppins Sans-Serif</option>
    <option>Roboto</option>
    <option>Inspiration</option>
    <option>Oswald</option>
    <option>Smokum</option>
    
  </select>
  
</div>
</body>
</html>

Este código lo he editado conforme a tu petición. El usuario puede ver los diferentes estilos de fuente y seleccionar la fuente que más quiera mediante un select.

Este truco tiene algunos contratiempos, por ejemplo no puedes editar el width ni el height de los <option>, no puedes poner márgenes o paddings.

Si te gustaría poder cambiar-los, entonces tendrías que utilizar JavaScript. Te dejo un link como referencia.

https://www.w3schools.com/howto/howto_custom_select.asp

2
  • Muchisimas gracias por tu respuesta Commented el 1 abr. 2022 a las 9:59
  • @JorgePiovano Porfavor si te ha ayudado marca la respuesta como correcta ( tick) marcando el tick verde y si te ha sido útil vótala positivamente. Está acción ayudará a la comunidad y también a mí. Gracias a ti.
    – Jack More
    Commented el 1 abr. 2022 a las 16:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.