How to apply font family in HTML tag of select option

Question

I am applying Font family in <select><option> tag but it is not working any option guys

My code :

<select name="t1_font" class="form-control" >
   <option style="font-family: Font-familly path');">Font-family Name</option>
</select>

My real code that I am using :

      <div class="col-sm-4">
  <?php $fonts=glob(FONT_URL.'*'); //print_r($fonts); ?>
  <?php if (!empty($fonts)): $i=0;?>
  <?php foreach ($fonts as $font):
    $font_arr= explode('/',$font); $font_string =substr($font_arr[3], 0, -4);?>
    <style>
    @font-face {
       font-family: <?php echo $font_string ?>;
       src: url('<?php echo $font ?>');
    }
    </style>
    <?php $i++;
    endforeach ?>
     <?php endif ?>
     <b>Family</b><br>
    <select name="t1_font" class="form-control" >
    <?php if (!empty($fonts)): ?>
      <?php foreach ($fonts as $font): $font_arr= explode('/',$font); $font_string =substr($font_arr[3], 0, -4); ?>
          <option style="font-family: <?php echo $font_string ?>;src: url('<?php echo base_url($font) ?>');" value="<?php echo $font_arr[3] ?>" <?php if(!empty($default_data_param->text1))
          {if($font_arr[3]== $default_data_param->text1_font_file){ echo'selected';}}?> ><?php echo ucfirst($font_string) ?></option>
      <?php endforeach ?>
    <?php endif ?>
    </select>
  </div>

Yes i want to apply my font family on my option text you can review my output on http://examine247.com/test.php — Anand Jain, Nov 15 '14 at 07:30

score 2 · Answer 1 · answered Nov 15 '14 at 06:58

2

You have a syntax error in your inline style, the correct syntax is:

option {
    font-family: 'sans-serif'
}

or with inline styles:

<option style="font-family: sans-serif">Font-familly Name</option>

'sans-serif' should be replace for the font you want.

answered Nov 15 '14 at 06:58

ianaya89

4,153
3
26
34

I am using the same code – Anand Jain Nov 15 '14 at 07:00
@user3616586 the property is OK, but 'Font-familly path' is not a valid font. – ianaya89 Nov 15 '14 at 07:07
– Anand Jain Nov 15 '14 at 07:37

score 1 · Answer 2 · answered Nov 15 '14 at 07:03

<select>

  <optgroup style="font-family:arial">
     <option>Arial</option>
  </optgroup>

  <optgroup style="font-family:verdana">
     <option> veranda </option>
  </optgroup>

  <optgroup style="font-family:other">
     <option>other</option>
  </optgroup>
  
</selecct>

score 0 · Answer 3 · answered Apr 12 '22 at 18:37

Try this: (works for Bootstrap 5)

<div class="">
    <label for="fontFamilySelect" class="form-label">Font Family</label>
    <select class="form-select" id="fontFamilySelect" onchange="updateFontFamily()">
        <option value="">Select</option>
        <option disabled style="font-weight: bold; background-color: #EEEEEE">Serif Fonts</option>
        <option value="Georgia,serif" style="font-family: Georgia,serif">Georgia</option>
        <option value="Palatino Linotype,Book Antiqua,Palatino,serif" style="font-family: Palatino Linotype,Book Antiqua,Palatino,serif">Palatino Linotype</option>
        <option value="Times New Roman,Times,serif" style="font-family: Times New Roman,Times,serif">Times New Roman</option>
        <option disabled style="font-weight: bold; background-color: #EEEEEE">Sans-Serif Fonts</option>
        <option value="Arial,Helvetica,sans-serif" style="font-family: Arial,Helvetica,sans-serif">Arial</option>
        <option value="Arial Black,Gadget,sans-serif" style="font-family: Arial Black,Gadget,sans-serif">Arial Black</option>
        <option value="Comic Sans MS,cursive,sans-serif" style="font-family: Comic Sans MS,cursive,sans-serif">Comic Sans MS</option>
        <option value="Impact,Charcoal,sans-serif" style="font-family: Impact,Charcoal,sans-serif">Impact</option>
        <option value="Lucida Sans Unicode,Lucida Grande,sans-serif" style="font-family: Lucida Sans Unicode,Lucida Grande,sans-serif">Lucida Sans Unicode</option>
        <option selected="selected" value="Tahoma,Geneva,sans-serif" style="font-family: Tahoma,Geneva,sans-serif">Tahoma</option>
        <option value="Trebuchet MS,Helvetica,sans-serif" style="font-family: Trebuchet MS,Helvetica,sans-serif">Trebuchet MS</option>
        <option value="Verdana,Geneva,sans-serif" style="font-family: Verdana,Geneva,sans-serif">Verdana</option>
        <option disabled style="font-weight: bold; background-color: #EEEEEE">Monospace Fonts</option>
        <option value="Courier New,Courier,monospace" style="font-family: Courier New,Courier,monospace">Courier New</option>
        <option value="Lucida Console,Monaco,monospace" style="font-family: Lucida Console,Monaco,monospace">Lucida Console</option>
    </select>
</div>

score 0 · Answer 4 · answered Feb 18 '23 at 07:33

0

font-family isn't honored in <option> element within <select> dropdown https://bugzilla.mozilla.org/show_bug.cgi?id=1536148

answered Feb 18 '23 at 07:33

karimAlhalabi

1

score -1 · Answer 5 · answered Jun 13 '21 at 06:30

-1

#select-group{
font-family: 'samim'!important;}

its cant work in firefox ------But it will work in Chrome!:)

answered Jun 13 '21 at 06:30

001100A001100

9
2

1

This answer isn’t very complete. Could you please add some more information to this? For example, where did the ID select-group come from? How does this answer differ to @mohammad-kermani’s answer? – Brook Jordan Jun 13 '21 at 12:33

Mohamed-Yousef · Answer 6 · 2014-11-15T15:16:50.240

-2

This is how my code run

Insert fonts in head tag

/* BAHAMAS */
@font-face {font-family: 'BAHAMAS'; src: url('../fonts/BAHAMAS0.eot');}
@font-face {font-family: 'BAHAMAS'; src: url(//:) format('no404'), url('../fonts/BAHAMAS0.ttf') format('truetype'); font-weight: normal; font-style: normal;}

call fonts

<option style="font-family:BAHAMAS;">My Font</option>

edited Nov 15 '14 at 15:16

answered Nov 15 '14 at 07:03

Mohamed-Yousef

23,946
3
19
28

@user3616586 see my updated answer. hope it will help – Mohamed-Yousef Nov 15 '14 at 15:17

Mohammad Kermani · Accepted Answer · 2022-05-05T13:24:24.597

-4

Update: It seems that this solution does not work anymore! Please see this answer

demo

#select1 {
  font-family: 'sans-serif';
}

#select2 {
  font-family: tahoma;
}

#select3 {
  font-family: monospace;
}

<select id="select1">
        <option>OPTION 1</option>
        <option>OPTION 2</option>
        <option>OPTION 3</option>
    </select>
<br/>
<select id="select2">
        <option>OPTION 1</option>
        <option>OPTION 2</option>
        <option>OPTION 3</option>
    </select>
<br/>
<select id="select3">
        <option>OPTION 1</option>
        <option>OPTION 2</option>
        <option>OPTION 3</option>
    </select>

edited May 05 '22 at 13:24

answered Nov 15 '14 at 07:07

Mohammad Kermani

5,188
7
37
61

2

This does not change the font of the ` – Flimm Jul 08 '20 at 12:33
1

So what is the way in Mozilla browser? – parastoo Jul 13 '20 at 17:04

How to apply font family in HTML tag of select option

7 Answers7

This is how my code run

Linked