6 Replies Latest reply: Apr 20, 2013 9:44 PM by nginzler1 RSS

    Why doesn't WebFonts work correctly? CS6, HTML5

    nginzler1

      I'm trying to use web fonts in my document. I added them Modify/Web Fonts/Add Fonts. I put in the four different kinds of fonts it asks for (using a WebKit from FontSquirrel). All the fonts show up  in my font menu. But when I try to add the font as a font-family style, it doesn't work - it just stays as the default sans serif font. Any ideas?

       

      I'm using CS6 and HTML5.

       

      THE RELEVANT PART OF THE CSS FILE:

      @font-face {

          font-family: 'Lilly';

          src: url('Lilly__-webfont.eot');

          src: url('Lilly__-webfont.eot?#iefix') format('embedded-opentype'),

              url('Lilly__-webfont.woff') format('woff'),

              url('Lilly__-webfont.ttf') format('truetype'),

              url('Lilly__-webfont.svg') format('svg');

      }

       

      p {

          font-family: Lilly;

      }

       

       

      THE WHOLE CSS FILE:

      @charset "UTF-8";

      /* Simple fluid media

         Note: Fluid media requires that you remove the media's height and width attributes from the HTML

         http://www.alistapart.com/articles/fluid-images/

      */

      img, object, embed, video {

          max-width: 100%;

      }

      /* IE 6 does not support max-width so default to width 100% */

      .ie6 img {

          width:100%;

      }

       

      /*

          Dreamweaver Fluid Grid Properties

          ----------------------------------

          dw-num-cols-mobile:        3;

          dw-num-cols-tablet:        4;

          dw-num-cols-desktop:    5;

          dw-gutter-percentage:    25;

         

          Inspiration from "Responsive Web Design" by Ethan Marcotte

         

       

          and Golden Grid System by Joni Korpi

        

      */

      @font-face {

          font-family: 'Lilly';

          src: url('Lilly__-webfont.eot');

          src: url('Lilly__-webfont.eot?#iefix') format('embedded-opentype'),

              url('Lilly__-webfont.woff') format('woff'),

              url('Lilly__-webfont.ttf') format('truetype'),

              url('Lilly__-webfont.svg') format('svg');

      }

       

      p {

          font-family: Lilly;

      }

       

      /* Mobile Layout: 480px and below. */

       

      .gridContainer {

          margin-left: auto;

          margin-right: auto;

          width: 84.9333%;

          padding-left: 3.0333%;

          padding-right: 3.0333%;

      }

      #LayoutDiv1 {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #header {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #nav {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #image {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #content {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #footer {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

       

      /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

       

      @media only screen and (min-width: 481px) {

      .gridContainer {

          width: 88.35%;

          padding-left: 2.325%;

          padding-right: 2.325%;

      }

      #LayoutDiv1 {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #header {

          clear: both;

          float: left;

          margin-left: 0;

          width: 47.3684%;

          display: block;

      }

      #nav {

          clear: none;

          float: left;

          margin-left: 5.2631%;

          width: 47.3684%;

          display: block;

      }

      #image {

          clear: both;

          float: left;

          margin-left: 0;

          width: 47.3684%;

          display: block;

      }

      #content {

          clear: none;

          float: left;

          margin-left: 5.2631%;

          width: 47.3684%;

          display: block;

      }

      #footer {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      }

       

      /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

       

      @media only screen and (min-width: 769px) {

      .gridContainer {

          width: 86.4%;

          max-width: 1232px;

          padding-left: 1.8%;

          padding-right: 1.8%;

          margin: auto;

      }

      #LayoutDiv1 {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #header {

          clear: both;

          float: left;

          margin: 50px 0 50px 0;

          width: 37.5%;

          display: block;

      }

      #nav {

          clear: none;

          float: left;

          margin: 50px 0 50px 4.1666%;

          width: 58.3333%;

          display: block;

      }

      #image {

          clear: both;

          float: left;

          margin-left: 0;

          width: 37.5%;

          display: block;

      }

      #content {

          clear: none;

          float: left;

          margin-left: 4.1666%;

          width: 58.3333%;

          display: block;

      }

      #footer {

          clear: both;

          float: left;

          margin: 50px 0;

          width: 100%;

          display: block;

      }

      }