Styling font in dropdown lists

**I’ve tried everything I can think of to style the font family and size in the options in my dropdown lists. Everything I google implies that the only way is by using javascript, but I thought that I wouldn’t need to use javascript yet in these challenges. Is there any css method to style the fonts? I know my code is a hot mess, sorry, it’s the second thing I’ve ever written. Thanks so much for any help. ps. I have no idea why my style sheet isn’t included in the scrolling box with the rest of my html code. **

**

<html>
    <head>
        <title>freeCodeCamp Survey Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html {
background: url("https://res-3.cloudinary.com/fieldfisher/image/upload/c_lfill,g_auto/f_auto,q_auto/v1/sectors/technology/tech_neoncircuitboard_857021704_medium_lc5h05");
background-size: cover;
font-family: Roboto;
background-attachment: fixed;
}
body {
  height: 100%;
}
h1 {
    text-align: center;
    color: rgb(244, 245, 248);
    padding-top: 6%;
    font-size: 2.25em;
}
#description {
    text-align: center;
    color: rgb(244, 247, 248);
    font-style: italic;
}
#form-container {
    margin-top: 5%;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    width: 70%;
    background-color:rgba(57, 42, 122, 0.767)
}
#form {
    padding: 50px;
}
#name, #email, #number, #dropdown, #dropdown2 {
    display: block;
    width: 100%;
}
label {
    color: white;
    font-size: 1.5em;
    vertical-align: middle;
}
input, textarea, select {
    min-width: 1.5em;
    min-height: 2em;
    vertical-align: middle;
    font-family: inherit;
}

textarea {
    width: 100%;
    height: 7em;
}
button {
    font-family: Roboto;
}
.submit {
    text-align: center;
}

</style>

     </head>
    
     <body>
         <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
         <h1 id="title">freeCodeCamp Survey Form</h1>
         
         <p id="description">Thank you for taking the time to help us improve the platform</p>
    <div id="form-container">
         <div id="form">
         <form id="survey-form">
                <section>
        <div class="text-input"><label class="title" id="name-label">Name</label><input id="name" type="text" placeholder="Enter your name" required></div>
        <div class="text-input"><label class="title" id="email-label">Email</label><input input type="email" id="email" type="text" placeholder="Enter your email" required></div>
        <div class="text-input"><label class="title" id="number-label">Age (optional)</label><input id="number" type="number" placeholder="Enter your age" min="0" max="99" required></div>
                </section>
        <div><label for="dropdown1" class="title">What option best describes your current role?</label></div>
    <div>
        <select id="dropdown" name="Select current role">
                <option value="select current role" disabled selected>Select current role</option>
                <option value="Student">Student</option>
                <option value="Full time job">Full time job</option>
                <option value="Full time learner">Full time learner</option>
                <option value="Prefer not to say">Prefer not to say</option>
                <option value="Other">Other</option>
        </select>
    </div>
    <section>
        <div><label for="definitely"><input id="definitely" type="radio" name="recommend?" value="definitely" checked>Definitely</label></div>
        <div><label for="maybe"><input id="maybe" type="radio" name="recommend?" value="maybe">Maybe</label></div>
        <div><label for="not-sure"><input id="not-sure" type="radio" name="recommend?" value="not sure">Not sure</label></div>
    </section>
    <div><label for="dropdown2" class="title">What is your favorite feature of freeCodeCamp?</label></div>
    <div>
        <select id="dropdown2" name="favorite feature">
                <option value="select an option" disabled selected>Select an option</option>
                <option value="Challenges">Challenges</option>
                <option value="Projects">Projects</option>
                <option value="Community">Open Source</option>
                <option value="Full time learner">Full time learner</option>
        </select>
    </div>
    <label for="checkbox-section">What would you like to see improved?</label>
    <section id="checkbox-section">
        <div><label for="1"><input type="checkbox" name="improve?" value="Front-end Projects" class="clickable" id="1">Front-end Projects</label></div>
        <div><label for="2"><input type="checkbox" name="improve?" value="Back-end Projects" class="clickable" id="2">Back-end Projects</label></div>
        <div><label for="3"><input type="checkbox" name="improve?" value="Data Visualization" class="clickable" id="3">Data Visualization</label></div>
        <div><label for="4"><input type="checkbox" name="improve?" value="Challenges" class="clickable" id="4">Challenges</label></div>
        <div><label for="5"><input type="checkbox" name="improve?" value="Open Source Community" class="clickable" id="5">Open Source Community</label></div>
        <div><label for="6"><input type="checkbox" name="improve?" value="Gitter help rooms" class="clickable" id="6">Gitter help rooms</label></div>
        <div><label for="7"><input type="checkbox" name="improve?" value="Videos" class="clickable" id="7">Videos</label></div>
        <div><label for="8"><input type="checkbox" name="improve?" value="City Meetups" class="clickable" id="8">City Meetups</label></div>
        <div><label for="9"><input type="checkbox" name="improve?" value="Wiki" class="clickable" id="9">Wiki</label></div>
        <div><label for="10"><input type="checkbox" name="improve?" value="Forum" class="clickable" id="10">Forum</label></div>
        <div><label for="11"><input type="checkbox" name="improve?" value="Additional Courses" class="clickable" id="11">Additional Courses</label></div>
    </section>
    <label for="textarea">Any comments or suggestions?</label>
    <div><textarea id="textarea" type="text" placeholder="Enter your comment here..."></textarea></div>
    <div class="submit"><button id ="submit" type="submit">Submit</button></div> 
    </form>
    </div>
    </div>
        </body>



</html>

**

Your browser information: google chrome

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

#dropdown {
font-family: Courier New;
}

Change into font u want.

I hope this answers ur question, as I can’t fully understand it + ur code isn’t really readable haha.
Try selecting ur code and pressing ctrl+shift+c when posting on the forums. It will turn it into a code block.

Oh, it indeed seems that the Roboto font won’t load into the dropdown.

Thanks so much for the reply. Unfortunately referencing the id of the select element and styling the font in this way doesn’t seem to be working.

i tried your suggestion of ctrl+shift+c , and i’ll repost the question with the code in a code block.

I tried loading it with the

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap" rel="stylesheet">

In codepen, and it kind of seems to work?
I can’t really tell with how tired I am haha.

Edit: works with the @import in stylesheet too.
Altough this is a “bolder” font. It does load into the #dropdown.

I’m so sorry, I appreciate you so much for helping me, I just don’t understand the code in the code block in your reply. What should I do with it? Thank you again.

Oh, it links a font to the “stylesheet”?
Just like you would link your css stylesheet to ur html with the <link> element.

This would be the CSS import:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap');

Oh wow! The font finally changed! At least I know that my original css import was what was holding me up. Everything is in italic now, but I feel like I can change that by looking for a different css import link on the google fonts page. But one more question. Now the placeholder text in my text imput fields is grayed out and the text in the dropdowns is dark black, when before they were the same color and weight. Do you know what happened?

I have no idea at the moment sorry. Hopefully somebody else can answer the question in the meantime.
It almost 02:00 am here, I have to go to sleep.

I hope you figure it out! :slight_smile:
Your site is looking good!
Happy coding!