7

I have integrated various custom fonts in tags working fine in FF but not working in web-kit browsers like (chrome & safari).

<select>
<option value="" style="font-family: 'Averia Libre'!important;">I'm a custom font.</option>
<option value="" style="font-family: 'cancun', cursive;">Hey me too!</option>
<option value="" style="font-family: 'Averia Libre', cursive!important;">Averia Libre</option>
</select>

jsfiddle demo here.

matthewb
  • 864
  • 5
  • 16
  • 1
    Browser vendors have conspired to make form control difficult to style. If you want complete control replace them with something else made to look the same (like an ol or ul). – reisio Apr 30 '13 at 08:25
  • Hey Thanks @reisio, i can't use ul li structure where i have to place this stuff. – matthewb Apr 30 '13 at 08:30
  • Sure you can, matthewb. – reisio Apr 30 '13 at 08:54
  • @matthewb may be this one help you http://stackoverflow.com/questions/13034601/custom-fonts-not-rendering-in-chrome-safari – snowp Apr 30 '13 at 09:24

2 Answers2

0

You could create CSS classes for the option which uses specific font defined using @font-face. For example, if u have following @font-face defined in your CSS

@font-face
{
font-family: "MyFont1";
src: url('Averia_Libre.ttf'),
     url('Averia_Libre.eot'); /* IE9 */
} 

@font-face {
  font-family: "MyFont2";
  src: url('cancun.ttf');
}

option.style1{
font-family: MyFont1;
}
option.style2{
font-family: MyFont2;
}

Your HTML code should be

<select>
<option value="" class="style1">I'm a custom font.</option>
<option value="" class="style2">Hey me too!</option>
</select>

Note I havent tested the code, probably it should work, because I have done like this long ago in one of my task i remember.

Sridhar
  • 1,832
  • 3
  • 23
  • 44
-3

The only way to use a custom font (ie that is not already on the client's machine) is to specyfy it using @font-face, that means naming your custom font (Here, "Myfont"), and point to at least one definition file (here, TrueType) :

@font-face {
  font-family: "Myfont";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) 
  format("truetype");
}
h1 { font-family: "Myfont", sans-serif }

From the webkit website : "WebKit now supports CSS @font-face rules"

  • The W3c specs
  • The CSS3.info page (with specifit Safari / Webkit notes)
  • The alistapart article
yPhil
  • 8,049
  • 4
  • 57
  • 83
  • 2
    The `@font-face` is not the problem, the ` – Quentin Apr 30 '13 at 09:23
  • You are right, Quentin. Then again, the question can mislead newcomers in the idea that the font is already on the client side (or that styling web forms is not dangerous for ergonomy and accessibility). – yPhil Apr 30 '13 at 09:28