How import a non-Google font into News Pro?

[CThor]

I'm rebuilding a site from the original News theme into the html5-based News Pro theme. In the News theme, I am importing a non-Google font like this:

/* Import Fonts
------------------------------------------------------------ */

@font-face {
    font-family: 'DINPro';
    src: url('http://knowledge.ckgsb.edu.cn/assets/fonts/dinpro-webfont.eot'); /* IE9 Compat Modes */
    src: url('http://knowledge.ckgsb.edu.cn/assets/fonts/dinpro-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('http://knowledge.ckgsb.edu.cn/assets/fonts/dinpro-webfont.woff') format('woff'), /* Modern Browsers */
    url('http://knowledge.ckgsb.edu.cn/assets/fonts/dinpro-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('http://knowledge.ckgsb.edu.cn/assets/fonts/dinpro-webfont.svg#DINPro') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

Works perfectly. But this way of font embedding doesn't work in html5, apparently. Anyone know what I need to do to import this font into the News Pro theme?

Many thanks in advance!

[ᴅᴀᴠɪᴅ]

This way works fine.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[CThor]

Sorry, does not work fine or else I would not have reached out for help...

Works in News, not in News Pro, at least in my experience. Could the problem be elsewhere and not with the code I posted?

Thanks for any assistance.

[CThor]

Okay, I figured this out and want to share in case anyone else has problems.

In the end, the code was indeed fine. The problem was that I was trying to import the fonts from the active website into the development website, which meant that the font and the website were not on the same domain. I couldn't figure out what Chrome's Inspector was telling me in its error message, but I had an intuition finally and and simply uploaded the fonts to the development server and changed the URL in the code accordingly. Then it worked perfectly.

[Author]

Posts