Skip navigation
nginzler1
Currently Being Moderated

Why doesn't WebFonts work correctly? CS6, HTML5

Jan 24, 2013 6:41 PM

Tags: #html #dreamweaver #css #html_code_writing #html5 #cs6 #html_5 #css3 #css_style

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;

}

}

 
Replies
  • Currently Being Moderated
    Jan 25, 2013 1:30 AM   in reply to nginzler1

    I donot see an @import URL in your CSS to call the webfont

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 25, 2013 6:25 AM   in reply to vharis

    The @font-face should work fine.

     

    I'm thinking it may be the second "src:" and semi-colon divider before it.

     

    I don't use that particular IEfix, so I could be wrong, but normally, you only have one src: in the @font-face rule and then list all of the files necessary separated by comas in their own url(file.suffix).

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 10:25 AM   in reply to nginzler1

    Have you uploaded your page and custom font kit to your server yet? 

    That's the best way to test web-fonts.

     

    Embedding Custom Web-Fonts

    http://alt-web.com/Articles/Custom-Web-Fonts.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 11:23 AM   in reply to Nancy O.

    Your code looks fine.  Are the MIME types defined for all file types being included?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2013 12:43 PM   in reply to nginzler1

    I have found that when creating any kind of HTML page with Creative Cloud DreamWeaver 6, the only way to get @font-face to work is to put the font files in the same folder as the css or html file which has the @font-face code. Putting the font files in any other folder and linking to them has not worked.

     

    It looks like your code is set up that way, but I thought you would want to know what worked for me.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points