Use special fonts on a non-hosted Wordpress blog

Question

I would like to use a font I've paid from webtype.com on my wordpress blog. I don't own the blog so I can't change anything in the main php files as function.php or add any plugins. So, the only solution I've found is to add this content in the css customization file :

@font-face {
 font-family: "Scout Normal";
 src: url("http://the/url/of/the/file") format("woff");
 font-style: normal;
 font-weight: normal;
}
.block p {
 font-family: "Scout Normal";
}

The problem is that every time I save the file, Wordpress remove the url in the loading of the font, that means

src: url("http://the/url/of/the/file") format("woff");

become

src: format("woff");

Here is a screenshot to show you where I add those css rules.

Do you have any ideas to force the loading of the font, or an other idea to load it ? Thank you for your help.

Answer 1

@Clemzd

First off you @font-face css is missing a few lines that are required for a font to work correctly across all browsers and platforms.

You only have one src url in your @font-face css.

Take a look at how my @font-face css is written. My font files are inside a folder called fonts inside the folder of my child theme where I have WP installed on my server.

@font-face {
font-family: Antenna-Regular;
src: url('/fonts/Antenna-Regular.eot');
src: url('/fonts/Antenna-Regular.eot?#iefix') format('embedded-opentype'),
     url('/fonts/Antenna-Regular.woff') format('woff'),
     url('/fonts/Antenna-Regular.otf') format('truetype'),
     url('/fonts/Antenna-Regular.svg#Antenna-Regular') format('svg');
font-weight: normal;
font-style: normal;
}

If you have the font files locally, why not create a new folder in your child theme called fonts and put the needed files in there. Then make your @font-face css look similar to mine.

If the fonts are on webtype.com and they give you the option to use the @import url(http://link_to_font); feature, try it out. Just put that line of code near the top of your css stylesheet. Then just use font-family: nameoffont; where ever you want in your css.