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;
}
}
