0

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.

  • You should probably talk to your host: it sounds like that theme customisation mechanism is deliberately stripping this out, likely so that you can't e.g. load inappropriate images as CSS backgrounds. Can you talk to them about it? They may be happy to sort this out for you, either as an exception to their filter or as a plugin: you can't be the only one who wants a custom font! As a last resort you could try pasting the base64-encoded font data into your CSS as a data URL, but not all browsers will support that. As a final thought, does your font source server have CORS cross-domain headers? – Rup Aug 14 '14 at 18:10
  • Thank you, i'll try to contact them, it's a good idea indeed. – Clemzd Aug 18 '14 at 17:31
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.

  • Hi, your second solution doesn't work, it's seems the import is not realize. Thank you – Clemzd Aug 18 '14 at 17:32
  • @Clemzd Yes that font site may not have the option to import your fonts like I mentioned. I know google fonts does though. – benlevywebdesign Aug 19 '14 at 17:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.