Please help! My Font not work?

Discussion in 'Web Design and Development' started by yjsiu, Dec 29, 2016.

  1. yjsiu macrumors newbie


    Dec 29, 2016
    This font works on w3schools website, but not on my webpage.

    1.Use font-face declaration Fonts.

    @font-face {font-family: "Avenir Next LT W01 Ultra Light";
      src: url("ffd0dcc47a9002be89cc7f900d4e144f.eot"); /* IE9*/
      src: url("ffd0dcc47a9002be89cc7f900d4e144f.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("ffd0dcc47a9002be89cc7f900d4e144f.woff2") format("woff2"), /* chrome、firefox */
      url("ffd0dcc47a9002be89cc7f900d4e144f.woff") format("woff"), /* chrome、firefox */
      url("ffd0dcc47a9002be89cc7f900d4e144f.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("ffd0dcc47a9002be89cc7f900d4e144f.svg#Avenir Next LT W01 Ultra Light") format("svg"); /* iOS 4.1- */
    2.Settings font css style

    div {
       font-family: 'Avenir Next LT W01 Ultra Light';
    With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
    Font download site

  2. olup macrumors 6502

    Oct 11, 2011
    What does your project structure look like?
    If your CSS is in a folder called css, but the font files are in a folder called fonts, then you need to specify the path to font accordingly because sources like images and fonts are referenced relatively to the CSS. So it would need to be referenced something like
    @font-face {
      src: url('../fonts/...eot),
    in order for it to work.
    Check out the link below for details:

Share This Page