@font-face: src called from HTML not from CSS (joomla)

Question

The Allura Google font is working fine on my joomla website. This is the code stored in typo.css that I use:

@font-face {
  font-family: 'font allura';
  font-style: normal;
  font-weight: 400;
  src: local('Allura'), local('Allura-Regular'), url(http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff) format('woff');
}

.allura{ font-family: 'font allura'; font-weight: bold; }

For some reasons, I would like to be able to call directly this font from within my article. So I created an article with this HTML:

<p style="font-family: font allura; font-style: normal; font-weight: 400; src: local('Allura'), local('Allura-Regular'), url('http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff') format('woff');">Font generated from the article, without accessing the CSS</p>

But it's not working, and I end up with the default font. I have also tried without more success:

<p style="font-family: font allura; font-style: normal; font-weight: 400; src= "http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff";">test direct dans article</p>

Any idea why and what should I do to solve this?

Thanks a lot!

P.S: I now it's bad practice (as it's better to organised everything from css), but I really need to do this that way.

Answer 1

You cannot include the font description, with src: ..., into a style attribute, since that attribute has special limited syntax.

So you need the @font-face rule in a style element or in a linked stylesheet. If needed for some technical reason, you can, in practice, place a style element right before a p element; by the specifications, a style element must appear in a head element, but in practice it works in body too.

Answer 2

I think your problem is that you need to enclose the font name in single quotes so

<p style="font-family: font allura; font-style: normal; font-weight: 400; src: local('☺'), url('http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff') format('woff');">Font generated from the article, without accessing the CSS</p>

should be

<p style="font-family: 'allura'; font-style: normal; font-weight: 400; src: local('☺'), url('http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff') format('woff');">Font generated from the article, without accessing the CSS</p>

Answer 3

Code based on Jukka K. Korpela answer:

<style>
         .allura{
            font-family:'font allura';
            font-style: normal;
            font-weight: 400;
            src: local('Allura'), local('Allura-Regular'), url(http://themes.googleusercontent.com/static/fonts/allura/v2/ExiT4hKozv4E-LiOi2vvJA.woff)format('woff');
            }

</style>

<p class="allura">Font generated from the article, without accessing the CSS</p>