Importing Font to WP?
- Started
- Last post
- 5 Responses
- sem
Hi guys,
I'm so confused...am trying to add the DIN font to a Wordpress and its just not working.
Can anyone see what i'm doing wrong? or suggest a good guide, different way etc.
/* Heading */
h1,h2,h3,h4,h5,h6
{
color:#b0cb1f;
font-family:DINWebPro, Ubuntu, sans-serif;
font-weight:300
}h1
{
font-family:'DINWebPro';
src: local('FF_DIN_Bold');
url("fonts/FF_DIN_Bold.otf") format('Opentype');
font-size:50px;
line-height:50px;
margin-bottom:20px;
text-transform:uppercase
}h2
{
font-size:24px;
line-height:32px;
margin-bottom:20px;
text-transform:uppercase
}h3
{
font-size:20px;
line-height:26px;
margin-bottom:10px
}h4
{
font-family:'Open Sans', sans-serif;
font-size:16px;
line-height:21px;
margin-bottom:10px
}h5
{
font-family:'DINWebPro';
src: local('FF_DIN_Bold'),
url("fonts/FF_DIN_Bold.otf") format('Opentype');
font-weight: bold;
font-size: 20px;
}h6
{
font-size:12px;
line-height:21px;
text-transform:uppercase
}.heading1
{
display:block;
font-size:50px;
line-height:50px;
margin-bottom:20px;
text-transform:capitalize
}
- mg330
Just wondering, do you have your @fontface file set up and set up properly?
- sem0
No I do not, how would I set that up? :S
- Nathan_Adams0
Where are you getting DIN from?
If you're using a webfont service, they should provide you with a javascript or css file to reference which does the @fontface import.
- elahon0
Try uploading your font here and using the CSS that FontSquirrel provides.
http://www.fontsquirrel.com/tool…
CSS from FontSquirrel usually looks like this:
@font-face {
font-family: 'GoodDogRegular';
src: url('GoodDog-webfont.eot');
src: url('GoodDog-webfont.eot?#iefix... format('embedded-opentype'),
url('GoodDog-webfont.woff') format('woff'),
url('GoodDog-webfont.ttf') format('truetype'),
url('GoodDog-webfont.svg#GoodDog... format('svg');
font-weight: normal;
font-style: normal;
}
Then below that, declare your H1, H2, etc:h1 {font: 180%/1.5em "GoodDogRegular", Times New Roman, serif;}
- kingsteven0
you could try and set the font to courier or sthg just to make sure it's cascading correctly... (or just inspect in your browser, see if another rule is getting precedence) the theme could have a css reset or whatevs.