Custom @Font-face CSS

问题:

Can anybody see why this custom font code is not working for me, the font is placed in the root of my directory and i have tried the various font formats.

CSS

@font-face
{
font-family: pacifico;
src: url(pacifico-webfont.woff);
}
 #nav ul li {
font-family:pacifico;
font-size:18px;
display: block;
margin-left:30px;
}

HTML

 <div id="nav" class="subMenu">
    <ul>
        <li><a data-scroll-nav='0'>Home</a></li>
        <li><a data-scroll-nav='1'>About Me</a></li>
        <li><a data-scroll-nav='2'>Portfolio</a></li>
        <li><a data-scroll-nav='3'>Contact</a></li>
    </ul>


</div>

回答1:

Along with .woff you also need to add other font types as well

@font-face {
  font-family: 'pacifico';
  src: url('pacifico.eot'); /* IE9 Compat Modes */
  src: url('pacifico.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('pacifico.woff') format('woff'), /* Modern Browsers */
       url('pacifico.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('pacifico.svg#svgFontName') format('svg'); /* Legacy iOS */
}

#nav ul li {
font-family:pacifico, arial, helvetica, sans-serif;
font-size:18px;
display: block;
margin-left:30px;
}

also you need to confirm path of fonts with respect to CSS file. also its a good practice along with custom fonts you should also give web safe fonts like arial, helvetica etc. so in case if your custom font wont work then this font will be applied

Reference Article URL and online font conversion tool

Hope it helps!