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