0

Im trying to give a font-family to my options of my select menu but its not working.

Im trying with this code below, and it seems that works on google chrome, but on internet explorer Im having a different font-family.

Do you know how can I set a font-family to my options that works on chrome but also in internet explorer??

This is my html:

<div class="select_teams">
        <select name="teams">
           <option class="option">Select your team:</option>
           <option class="option" value="1">ACM</option>
           <option class="option" value="2">PSG</option>
           <option class="option" value="2">RM</option>
        </select>
 </div>

This is my css:

.select_teams select{min-width:250px; padding:10px; border:3px solid #CCC; font-size:18px;}
.select_teams .option{transition:none; font-family:'bariol_regularregular';}

On chrome and mozilla Im getting this:

enter image description here

On internet explorer Im getting this:

enter image description here

UserX
  • 1,295
  • 7
  • 25
  • 39

2 Answers2

1

It's most likely down to how you are embedding the bariol_regularregular font.

You have no fallback font, so the browser will:

1 ) Try and use bariol_regularregular 2 ) Use the browser's default font

If you have embedded it correctly for Chrome but not IE, this is a possible solution: Safari and IE can't read TTF and EOT fonts

Using a similar font from Google Fonts may be a quicker fix - they do all that for you.

Community
  • 1
  • 1
RichardB
  • 2,615
  • 1
  • 11
  • 14
  • Thank you for your answer Richard B. So I´ll try to use verdana instead of bariol. But even if I use this css: .posts select_teams .option{transition:none; font-family:Verdana, Geneva, sans-serif;} on internet explorer Im having always a diffrent font. Do you know why this can be happening? – UserX Jun 28 '14 at 22:57
  • And I already try to find a font family similar like bariol on google fonts but I never find! – UserX Jun 28 '14 at 23:00
  • 1
    Applying it to your select rather than the option seems to work. Might work with your original font too (but bear in mind that one does need embedding as it is not web safe). – RichardB Jun 28 '14 at 23:05
  • Thanks really for trying to help. But even with your code, using !important, Im having the same result. As you see on my question update, on internet explorer my font-familly is different of my chrome and mozilla. – UserX Jun 28 '14 at 23:26
  • Does my jsfiddle link not work either? If it does, can you update the css in your question to show how exactly you have tried to implement it. – RichardB Jun 28 '14 at 23:32
  • Your fiddle opened on internet explorer, but If I put same code that you have in my exercise its not working..I get the result that I update in my question. – UserX Jul 01 '14 at 01:45
1

Set the font on the select element, not on the option elements. Example:

.select_teams { font-family: 'bariol_regularregular'; }

The reason is that IE uses a uniform style for option elements, based on the style of their parent select element, instead of letting us style options individually. Cf. to Styling options in bold in Internet Explorer.

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thank you Jukka K.Korpela. Now I understood the problem on IE with your answer. But your solution still dont work on internet explorer! – UserX Jul 01 '14 at 01:40
  • I tested the solution in IE 11 using also emulation modes down to IE 5, naturally using a font that actually exists in my system. If it does not work for you, check whether it is a problem with the bariol_regularregular font: does it work for normal content (say, for a `p` element)? – Jukka K. Korpela Jul 01 '14 at 10:17