Using multiple Google web fonts in Orchard theme causes server error

Topics: Writing themes
Mar 4, 2013 at 6:34 PM
I'm trying to include multiple web fonts into an Orchard theme. Google gives the usage as follows:
<link href='http://fonts.googleapis.com/css?family=Tauri|Patrick+Hand+SC|Sintony' rel='stylesheet' type='text/css'>
Hence I added the following line to Layout.cshtml:
Style.Include("http://fonts.googleapis.com/css?family=Tauri|Patrick+Hand+SC|Sintony");
This causes the server error 'http:/fonts.googleapis.com/css' is not a valid virtual path.:

Image

It works fine with one single font. Just when there is a | in the url, it snaps. I suppose this is either a bug, or I have to use some sort of escape sequence in my link.

One workaround would be to include the <link> tag provided by Google in the documents file, but I'd rather have it with the other style includes in layout.cshtml, since my theme doesn't have a document.cshtml, and I'd like to keep it that way if possible. Another way is to include them seperatly, but this results in additional http-requests.

Any ideas?

Alex
Coordinator
Mar 4, 2013 at 6:54 PM
Edited Mar 4, 2013 at 6:54 PM
You missed a slash. It's http://, not http:/
Mar 5, 2013 at 10:51 AM
There are two slashes in my code (see second code block). I have tried four slashes because I thought they were escaped, but it produces the exact same error with only one slash in the error message.

As I said, if the URL does contain only one font it works fine. The error only throws with multiple fonts, when there is a vertical bar ( | ) in the URL.

Is there a way to escape this character?

Cheers and thank you for your help.
Developer
Mar 7, 2013 at 12:29 AM
Perhaps it's a bug. Can you step through the code and see what happens to the url you're feeding it?
Aug 16, 2013 at 2:36 PM
Hi arechsteiner,

This is a little old but if anyone else stumbles upon this, I have used HttpUtility.UrlEncode to make it work. Here is a code snippet:
string webFontFamily = "Cinzel:400,700|PT+Sans:400,700";
string webFontFamilyEncoded = HttpUtility.UrlEncode(webFontFamily);
string webFontUrlEncoded = string.Format("{0}{1}", "http://fonts.googleapis.com/css?family=", webFontFamilyEncoded);
Style.Include(webFontUrlEncoded);
Seems to work fine (displays the fonts as expected here). Hope it helps.