How to add custom fonts?
How does one add custom fonts? I've got both self-hosted and font service fonts on my present site.
Try this.... its in the post for RSD, but I would believe it works here as well.
http://www.coffeecup.com/forums/respons … se/?page=1
http://www.coffeecup.com/forums/respons … se/?page=1
Perfect. Thanks.
Did it work??
Haven't had a chance to do it yet. I'll report back.
I've added a custom font (.eot .woff .svg .ttf versions) to the fonts folder and added custom css to use it for <Hn> tags.
I can't get the font to show in Foundation Framer or get added to the typography dropdown. Note, if I hand code an html document on the website after publishing the font functions perfectly. I feel like I'm missing something.
custom-styles.css (added in head of page):
@font-face {
font-family: 'Crewniverse';
src: url('../fonts/crewniverse_font.eot');
src: url('../fonts/crewniverse_font.eot?#iefix') format('embedded-opentype'),
url('../fonts/crewniverse_font.woff') format('woff'),
url('../fonts/crewniverse_font.ttf') format('truetype'),
url('../fonts/crewniverse_font.svg#CrewniverseRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: Crewniverse;
font-size: 30px;
color: #000;
}
h2 {
font-family: Crewniverse;
font-size: 25px;
color: #f00;
}
h3 {
font-family: Crewniverse;
font-size: 20px;
color: #0f0;
}
I can't get the font to show in Foundation Framer or get added to the typography dropdown. Note, if I hand code an html document on the website after publishing the font functions perfectly. I feel like I'm missing something.
custom-styles.css (added in head of page):
@font-face {
font-family: 'Crewniverse';
src: url('../fonts/crewniverse_font.eot');
src: url('../fonts/crewniverse_font.eot?#iefix') format('embedded-opentype'),
url('../fonts/crewniverse_font.woff') format('woff'),
url('../fonts/crewniverse_font.ttf') format('truetype'),
url('../fonts/crewniverse_font.svg#CrewniverseRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: Crewniverse;
font-size: 30px;
color: #000;
}
h2 {
font-family: Crewniverse;
font-size: 25px;
color: #f00;
}
h3 {
font-family: Crewniverse;
font-size: 20px;
color: #0f0;
}
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.