Please help! My Font not work?

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

Tags:
  1. yjsiu macrumors newbie

    yjsiu

    Joined:
    Dec 29, 2016
    #1
    This font works on w3schools website, but not on my webpage.

    1.Use font-face declaration Fonts.

    Code:
    @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

    Code:
    div {
       font-family: 'Avenir Next LT W01 Ultra Light';
    }
    3.DEMO:
    Code:
    <div>
    With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
    </div>
    Font download site https://www.onlinewebfonts.com/

    [​IMG]
     
  2. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #2
    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
    Code:
    @font-face {
       ...
      src: url('../fonts/...eot),
    .....
    }
    in order for it to work.
    Check out the link below for details:
    https://css-tricks.com/quick-reminder-about-file-paths/
     

Share This Page