Relative path in css for @font-face embedding

[monotasker]

I'm trying to use an embedded font referenced in a stylesheet. The only url that seems to work in the @font-face declaration (in my css file) is one that begins with the appname: /[appname]/static/[font folder]. It seems, though, like I can't generate the URL programmatically (with the URL helper) in the css file. So is there a relative address that will work?

It just occurred to me that the problem might be my use of the less.js css processing script. Could the URL helper not be working because it conflicts somehow with less.js?  

[Anthony]

Are you saying you're trying to use the URL function in a static CSS file? That's not possible. The URL function can only be used in web2py code -- in a model, controller, view, or imported Python module. Static files are, well, static -- they are served as is and not processed by the framework.

If /appname/static/font_folder works, why not just use that in the CSS file?

Anthony

[Martín Mulone]

relative url in css have to work, have nothing to do with web2py.

My files are:

static/css/myfont.eot

static/css/layout.css

My def:

src: url('myfont.eot');  

My files are:

static/css/fonts/myfont.eot

static/css/layout.css

My def:

src: url('fonts/myfont.eot'); 

2011/11/30 monotasker <scot...@gmail.com>

I'm trying to use an embedded font referenced in a stylesheet. The only url that seems to work in the @font-face declaration (in my css file) is one that begins with the appname: /[appname]/static/[font folder]. It seems, though, like I can't generate the URL programmatically (with the URL helper) in the css file. So is there a relative address that will work?

It just occurred to me that the problem might be my use of the less.js css processing script. Could the URL helper not be working because it conflicts somehow with less.js?  

--

 http://martin.tecnodoc.com.ar

[monotasker]

I would keep using that url, but it includes my app name -- a problem since I'm trying to build a presentation *plugin* that includes the font-face embedding. So I need a url that begins above the "appname" folder.

[monotasker]

I'll try these again. So far they didn't seem to work for me.

[Jonathan Lundell]

If you use the relative URL "static/...", what does the browser resolve it to?

[Martín Mulone]

I'm not sure, what do you want to do?, or why do you need to include app path?. But you can also make it this in the view to make use of URL() in the view or layout include the tag style simil to this:

<style type="text/css">

...

@font-face {  

src: url('{{=URL('static','myfont.eot')}}');  

}

</style>

2011/11/30 monotasker <scot...@gmail.com>

I'll try these again. So far they didn't seem to work for me.

--

 http://martin.tecnodoc.com.ar

[Jonathan Lundell]

On Nov 30, 2011, at 2:15 PM, Martín Mulone wrote:

> I'm not sure, what do you want to do?, or why do you need to include app path?. But you can also make it this in the view to make use of URL() in the view or layout include the tag style simil to this:
>
> <style type="text/css">
> ...
> @font-face {
> src: url('{{=URL('static','myfont.eot')}}');
> }
> </style>
>

You can also serve CSS files as views and embed template code in them.

[Christopher Steel]

Here is a working example and the corresponding googlecode project used to create it that you can use as a reference. FYI squirrelfont has a nice  automated system that allows you to create font "packages" that include most of what you will need. I used if for the following project.

Running example
http://www.chrissteel.com/fonts

Fonts
http://code.google.com/p/uc-font/

The example uses openfonts. It is a little sloppybut it works as an example. I have a newer, cleaner version around somewhere, if I can locate it I will update the repository.

Cheers,

Chris

[monotasker]

It resolves to http://127.0.0.1:8000/topoi/plugin_listandedit/list/notes/static/plugin_framework/fonts/websymbols-regular-webfont.woff

This is treating the font url as relative to the full request URL (including arguments), not the app root directory. That's what's confusing me.

[Jonathan Lundell]

On Dec 2, 2011, at 7:41 AM, monotasker wrote:

It resolves to http://127.0.0.1:8000/topoi/plugin_listandedit/list/notes/static/plugin_framework/fonts/websymbols-regular-webfont.woff

This is treating the font url as relative to the full request URL (including arguments), not the app root directory. That's what's confusing me.

This is when your url is 'static/...', right? That's normal behavior, and nothing to do with web2py. The browser knows that it accessed http://127.0.0.1:8000/topoi/plugin_listandedit/list/notes and all relative URLs are relative to that path. The browser knows nothing about how elements of the path are interpreted by the server; a path is a path.

To summarize, what you want is this:

 http://127.0.0.1:8000/topoi/static/plugin_framework/fonts/websymbols-regular-webfont.woff

but without specifying 'topoi', because you want it appname-independent, right?

One option is the <base> tag (generated dynamically via a template, so you don't type the appname literally):

<base href="/topoi/" />

The problem is that it applies to *all* relative URLs, so make sure you take that into account. Fortunately the URL() helper always generates absolute URLs.

Another option is to server your CSS files dynamically via a css controller. Depending on your application, the performance hit needn't be too bad if you make sure that the generated pages are cached by the browser. This is a handy technique, because it lets you parameterize anything you like in your CSS.

[Anthony]

I thought CSS files interpreted relative URLs relative to the CSS file itself, not the page in which it was loaded. If the CSS file is in /static/css and the font is in /static/plugin_framework/fonts, maybe src: url(../plugin_framework/fonts/websymbols-regular-webfont.woff) will work.

Anthony

[Jonathan Lundell]

On Dec 2, 2011, at 8:28 AM, Anthony wrote:

I thought CSS files interpreted relative URLs relative to the CSS file itself, not the page in which it was loaded. If the CSS file is in /static/css and the font is in /static/plugin_framework/fonts, maybe src: url(../plugin_framework/fonts/websymbols-regular-webfont.woff) will work.

I think that's right, and also it ignores <base>. IE6 excepted, perhaps. 

My comments below apply only to relative URLs in the html file.