How to Change Font-Family of Drop Down's List Item

How to change font-family of drop down's list item?

That's because the select elements children (options) aren't really stylable and firefox seems to be the only browser to ignore that part of the spec.

The workaround is to replace your select element with a custom widget that uses only stylable elements and perhaps a little javascript for the interactivity. like what's done here: http://jsfiddle.net/sidonaldson/jL7uU/ or http://jsfiddle.net/theredhead/4PQzp/

How to change font of select list items in the drop down

In jQuery Mobile you have the option to use the non native select menu:

<span class="stars">
    <select id="AddbookConditionSelect" data-native-menu="false" >
        <option>Please select a condition rating</option>
        <option value="1" class="staritem">R</option>
        <option value="2" class="staritem">RR</option>
        <option value="3" class="staritem">RRR</option>
        <option value="4" class="staritem">RRRR</option>
        <option value="5" class="staritem">RRRRR</option>
    </select>
</span>

The first option with no value is automatically treated as a placeholder and popup title, so you are left with pretty simple CSS to style the star options which can appea in a popup, a dialog and the selected text of the select:

#AddbookConditionSelect-listbox li a, #AddbookConditionSelect-menu li a, .staritem{
   font-family: WebSymbols-Regular;
   color: #eab92d;
}
#AddbookConditionSelect-button {
   font-family: 'Lato', sans-serif ; 
}

Here is a working DEMO

Change HTML dropdown option font size

You should turn off the default OS styling with: -webkit-appearance: none;

DEMO here

Change Font by Option Dropdown Javascript

Here's your example cleaned up and working.

<div id="output-text">
  hello folks 
</div>

<select id="input-font" class="input"  onchange="changeFont (this);">
      <option value="Times New Roman" selected ="selected">Times New Roman</option>
      <option value="Arial">Arial</option>
</select>

JavaScript

var changeFont = function(font){
  console.log(font.value)
    document.getElementById("output-text").style.fontFamily = font.value;
}

Now you can add as many fonts in the dropdown list in the HTML and it will work..
Working example here:

JSFIDDLE

CSS - wordpress how to change the drop down element's font style

You need to chain the CSS selectors, like:

option.attached.enabled {
    font-family: Montserrat;
    font-weight: 700;
}

https://jsfiddle.net/39gd2mtq/

What you currently have (option.attached enabled) is looking for a child element called enabled within option.attached.

change font size of default option of dropdown box

Many browsers will apply default styles to select dropdowns so for your styling to apply you will need to undo this default styling with the following. The variants are for different browsers.

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

body {
    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    font-size: 20px;
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:rgb(241, 241, 241);
    color: orangered;
    text-align: center;
}
.experience {
    display: block;
    float: right;
}
.see-all {
    float: right; 
    color: orangered;
}
.choose-form {
    background-color:rgb(246, 229, 246);
    padding: 10px;

}
.orange {
    background-color:#f78336;
    font-size:30px;
    color:white;
}
button {
    background-color:#f78336;
    font-size:30px;
    color:white;
}
option {
    font-size: 50px;
}
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-size: 30px;
    padding: 10px;
}

<form class="choose-form">
  <div class="mb-3">
    <select class="form-select" id="question">
      <option> <span style="font-size:100px;">Select a category : Love,carrer,more ...</span></option>
      <option> <span style="font-size:100px;">Love</span></option>
      <option> <span style="font-size:100px;">Carrer</span></option>
      <option> <span style="font-size:100px;">Marriage</span></option>
    </select>
  </div>

  <nav class="navbar navbar-expand-lg navbar-light">
    <!-- edited line -->
    <span class="priceShow"> ₹99(including GST)</span>
    <span>Ideas what to ask</span>
    <div class="profile-icon" style="justify-content-end;">
      <button type="submit" class="btn btn-warning orange">Ask a Question </button>
    </div>
  </nav>
</form>