Uploading @font-face Fonts

[ckgerard]

Hi guys,

I’m really appreciate some help getting my fonts to work. I’m a bit out of my depth with css / javascript. I’ve detailed what I’ve done so far but it doesn’t work / change. I’m just trying to change the menu font for the moment

Thanks in advance for your help!

I’ve created and downloaded a webfontkit using Font Squirrel:
webfontkit-20141013-054317

I’ve upload and unzipped this into wordpress/fonts/ directory

I’ve added the text from generated stylesheet.css to the custom css panel – I’ll add this long text at the bottom of this message for reference.

In the Font Options / Menu FontDeck Font panel I’ve added:
h1{font-family: ‘transatblack’;
font-weight: 400;
font-style: normal;
}

In the Font Options / FontDeck JS Code panel I’ve added:
<script type=”text/javascript”>
WebFontConfig = { fontdeck: { id: ‘20141013-054317’ } };

(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

stylesheet.css is as follows:

@font-face {
font-family: ‘transatblack’;
src: url(‘typetanic_fonts_-_transatblack-webfont.eot’);
src: url(‘typetanic_fonts_-_transatblack-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘typetanic_fonts_-_transatblack-webfont.woff2’) format(‘woff2’),
url(‘typetanic_fonts_-_transatblack-webfont.woff’) format(‘woff’),
url(‘typetanic_fonts_-_transatblack-webfont.ttf’) format(‘truetype’),
url(‘typetanic_fonts_-_transatblack-webfont.svg#transatblack’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘transatmedium’;
src: url(‘typetanic_fonts_-_transatmedium-webfont.eot’);
src: url(‘typetanic_fonts_-_transatmedium-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘typetanic_fonts_-_transatmedium-webfont.woff2’) format(‘woff2’),
url(‘typetanic_fonts_-_transatmedium-webfont.woff’) format(‘woff’),
url(‘typetanic_fonts_-_transatmedium-webfont.ttf’) format(‘truetype’),
url(‘typetanic_fonts_-_transatmedium-webfont.svg#transatmedium’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘transatstandard’;
src: url(‘typetanic_fonts_-_transatstandard-webfont.eot’);
src: url(‘typetanic_fonts_-_transatstandard-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘typetanic_fonts_-_transatstandard-webfont.woff2’) format(‘woff2’),
url(‘typetanic_fonts_-_transatstandard-webfont.woff’) format(‘woff’),
url(‘typetanic_fonts_-_transatstandard-webfont.ttf’) format(‘truetype’),
url(‘typetanic_fonts_-_transatstandard-webfont.svg#transatstandard’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

[Rui Guerreiro – SUPPORT]

Hi,

Check this documentation.

http://dante.swiftideas.net/documentation/#font-options

-Rui

[ckgerard]

Hi Rui

I’ve referred to that document to get where I am. Like I said, I’m kind of out of my depth with ccs / java.

I’m stuck.

Can you help?

[Rui Guerreiro – SUPPORT]

I think what you did differently was the font file upload. Guess you didn’t upload the fonts to the media manager. Can you try it?

-Rui

[ckgerard]

Hi Rui

Thanks for getting back. As suggested here:

http://dante.swiftideas.net/documentation/#font-options

I tried uploading the fonts in the webfontkit I downloaded from Font Squirrel (one at a time) to the WordPress Media Manager.

I keep getting and error message for each of the 5 font formats (.svg .ttf .eot .woff .woff2 ) saying:
Sorry, this file type is not permitted for security reasons.

Any ideas where I’m going wrong? Please be as detailed as possible – I’m out of my depth with css / javascript.

[Swift Ideas – Ed]

You’ll need to enable those filetypes to be uploaded, as WordPress doesn’t allow them as standard. See this guide: http://www.vionblog.com/wordpress-allow-all-file-types/

Hope that helps.

– Ed

[ckgerard]

Thanks Ed. Your my favorite person in the world right now.

I’ve done that and they seem to have uploaded now.

Still cant get the font to show up. I’m just trying the menu font at the moment.

Can you see what I’m doing wrong??

I’m out of my depth with css / javascript.

Best,

C

[Mohammad – SUPPORT]

Hi,
You had wrong path of fonts files so i corrected it. Its working fine.
Thanks
Mohammad

[ckgerard]

Mohammad! Thank you so much!!

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad

[ckgerard]

Hi again Mohammad

The menu is working perfectly. I thought I’d be able to activate the Headings (medium) and the body text (standard) but it doesn’t see to work / not sure how you did it.

Could you assist me again? I’m already so grateful for your help.

C

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

h1,h2,h3,h4,h5,h6{font-family: 'transatblack' !important;
font-weight: 400;
font-style: normal;
}

Thanks
Mohammad

[ckgerard]

Thanks again, Mohammad. You’re the best!

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad