I can't seem to add a font to my web page. Am I doing anything incorrectly here?
@font-face {
font-family: "Myriad Ultralight";
src: local("Myriad Ultralight"), url("fonts/myriad-set-pro_ultralight.ttf") format("ttf");
}
#product-catchphrase {
font-family: "Myriad Ultralight", "Garamond";
text-align: center;
font-size: 40px;
}
Hi Michelle. It looks like there is something wrong with the way you have added the @font-face. I believe you will have to add all of the fonts like so (place it near the top of your CSS file):
/* Font */
@font-face {
font-family: "Myriad Set Pro";
src: url("fonts/myriad-set-pro_bold.ttf") format("truetype");
font-weight: 700;
}
@font-face {
font-family: "Myriad Set Pro";
src: url("fonts/myriad-set-pro_semibold.ttf") format("truetype");
font-weight: 600;
}
@font-face {
font-family: "Myriad Set Pro";
src: url("fonts/myriad-set-pro_medium.ttf") format("truetype");
font-weight: 500;
}
@font-face {
font-family: "Myriad Set Pro";
src: url("fonts/myriad-set-pro_text.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Myriad Set Pro";
src: url("fonts/myriad-set-pro_thin.ttf") format("truetype");
font-weight: 300;
}
@font-face {
font-family: "Myriad Set Pro";
src: url("fonts/myriad-set-pro_ultralight.ttf") format("truetype");
font-weight: 100;
}
When you want to use it, use it like this.
#product-catchphrase {
font-family: "Myriad Set Pro"
font-size: 100; /* 100 for ultralight */
}