CSS font-face not working in Firefox

2019-05-13 22:44发布

I have this font face code below and it works fine in google chrome, but it doesnt work at all in firefox? why?

    <style type="text/css">
    @font-face {
    font-family: 'Lato';
    src: url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot');
    src: url('http://www.website.com/fonts/ca/Lato-Reg.ttf') format('truetype'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.woff') format('woff'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LatoBold';
    src: url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot');
    src: url('http://www.website.com/fonts/ca/Lato-Bol.ttf') format('truetype'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.woff') format('woff'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

nav ul li{
    font-family: 'LatoBold', sans-serif !important;
}
    </style>

 <nav id="mainNav">
            <ul class="grid_0">
                            <li>
                        <a href="http://www.website.com">Home</a>
                        </li></ul>

1条回答
叼着烟拽天下
2楼-- · 2019-05-13 23:22

It seems your font link is broken. if I may suggest you, just use google web fonts. There are many fonts that can be used for your website, easy to use and free. Lato's Font also there.

See my the demo here: http://jsfiddle.net/ongisnade/Nx5VR/

the css rules below

@font-face {
  font-family: 'LatoBold';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}

is the result of the extraction from google font link :

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

Hope its help :)

查看更多
登录 后发表回答