Font face compatability problems in the browsers

Question

I am trying apply font(xxx.woff) for my page. Below is the code. By using this link , i have applied font css Css is below.

@font-face {
    font-family: 'xxx';
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAJGG+N4ZgOyNL7RJAKI1J6TtUwuql7QX9RAaoHhg1UdowyYC8YFlAeM0qApRlFoBQwamH0EEr6gl1HWcsYDlCfMhqA4/8gyeXXOkjda0HnKj6AbbCzNWyB7ZlhE2xNDL3PbTd7CZN0seA9DX2wmxn2QH9jGIC92LAPBqM/U/L0G+ADZwQAAAAAAVfa6j8AAA==) format('woff');
    font-weight: normal;
    font-style: normal;

}
* {
        font-family: PB-Regular;
        font-size: 16px;
        color: # !important;
    }

Above code is working in Version 40.0.2214.111 Ubuntu 14.04,Firefox 35.0.1 Ubuntu 14.04. Except those 2 versions,its not work in any other browsers.
Please suggest me what should be done to work in all versions of chrome, firefox and IE9

Is that your real CSS code? The `font-family` values don't match. — skyline3000, Sep 15 '16 at 20:22
The `font-family` you define in your `@font-face` rule is what you need to call the font in the rest of your CSS code... if you name it 'xxx' in the `@font-face` definition then you need to use `font-family: 'xxx'` everywhere. — skyline3000, Sep 16 '16 at 12:31

score 0 · Answer 1 · answered Sep 15 '16 at 19:47

0

I believe (someone please correct me if I'm wrong) that .woff is only compatible with select browsers.

Add the font in .ttf to support other browsers.

answered Sep 15 '16 at 19:47

Nick Tirrell

441
2
13

tried .ttf also its not working,link which i have tried is https://css-tricks.com/snippets/css/using-font-face/ – siva shanker Sep 15 '16 at 19:59

score 0 · Answer 2 · answered Sep 16 '16 at 12:38

When you define an @font-face rule, the name you give the font-family value you use is the value you must use in the rest of the document:

@font-face {
  font-family: 'xxx';
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAJGG+N4ZgOyNL7RJAKI1J6TtUwuql7QX9RAaoHhg1UdowyYC8YFlAeM0qApRlFoBQwamH0EEr6gl1HWcsYDlCfMhqA4/8gyeXXOkjda0HnKj6AbbCzNWyB7ZlhE2xNDL3PbTd7CZN0seA9DX2wmxn2QH9jGIC92LAPBqM/U/L0G+ADZwQAAAAAAVfa6j8AAA==) format('woff');
  font-weight: normal;
  font-style: normal;
}
* {
  font-family: 'xxx'; /* You must use the value from the @font-face rule */           
  font-size: 16px;
  color: # !important;
}

Font face compatability problems in the browsers

2 Answers2