@font-face not rendering correct font-family in Chrome

Question

I have a dropdownlist that contains a list of fonts . I am able to display them properly on Firefox .. but when i turn to Chrome , the effect is not applied .

The CSS --

@font-face
{
    font-family: Comic Sans MS !important;
    src: url('../fonts/Comic Sans MS Regular/comic.ttf');
}

The Dropdownlist Change function is

$fontsDropdown = $('.custom-text-font').find('.fpd-fonts-dropdown').change(function() {
                    if (currentElement != null)
                    {
                        currentElement.setFontFamily(this.value);
                        currentElement.params.font = this.value;
                        //changed text to bold
                        currentElement.setFontStyle('bold');
                        currentElement.params.fontStyle = 'bold';

                        _outOfContainment(currentElement);
                        stage.renderAll();
                    }
            })

This produces a proper output on firefox ,,,, but on Chrome .,, It does not . Actually I get the changes reflected on Chrome .. but that change is reflected only when I click the font in dropdown second time. It does not happen on the first click on a font from the dropdown list.

Thanks

Font faces need different declarations for different browsers. See http://stackoverflow.com/questions/4051826/font-face-with-wrong-mime-type-in-chrome — timo, Sep 16 '14 at 13:11
And sometimes cross-domain not allowed: http://stackoverflow.com/questions/9641427/font-face-not-working-on-chrome. — loveNoHate, Sep 16 '14 at 13:19

score 0 · Answer 1 · edited Sep 16 '14 at 14:48

@font-face
{
    font-family: Comic Sans MS !important;
    src: url('../fonts/Comic Sans MS Regular/comic.ttf');
}

For this question. First of all remove spaces b/w folder name like replace another name to Comic Sans MS Regular. and for the font family you can choose another name than font-family: Comic Sans MS !important; And remove !important for this.. If this is working then good otherwise you can choose.. font face generator. You can choose font here and you can get font- face web kit.

http://convertfonts.com/

http://everythingfonts.com/font-face

score 0 · Answer 2 · answered Sep 16 '14 at 13:21

if the fonts are available in other different format(woff,ttf,svg,otf) .I suggest writing all the cross browser compatibly in the following manner

 src: url("DejaWeb-Bol.eot") format('embedded-opentype'), 
 url('DejaWeb-Bol.woff') format('woff'),
 url('DejaWeb-Bol.ttf') format('truetype'),
 url('DejaWeb-Bolsvg#') format('svg');
 font-weight:bold;
font-style:normal;

if you do't have this type of format download here and convert her

@font-face not rendering correct font-family in Chrome

2 Answers2