The HTML Validator tells me to change the URL in
<base url="http://handofflabs.com/handoff_faq.htm">
to HREF, thus:
<base href="http://handofflabs.com/handoff_faq.htm">
When I do it validates but my webfonts stop loading.
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
Can anyone see why?
Here is an example:
craigwebbart.com/handoff/handoff_faq.htm
<base> must be the first element in <head>. Not saying that’s the fix but it’s important to note.
The href=“” is REQUIRED and you should be using that, not “url”. Once you move the <base>, if that doesn’t fix it, then try putting an absolute URL on the <link> where it references the font file. E.g. http://handofflabs.com/css/fonts.css
Your suggestion worked when I added the direct link to the webfont.css and posted the HTML onto the client’s server.
Adding HREF to the <base> element breaks the font in production.
This is my first time using the <base> element and I copied the declaration from someone’s website.
I suppose that they wrote it as “URL” in production so they could see their fonts while working and forgot to change it when they posted the final files to the server.
Lesson learned.
Thank you for your help.
That’s certainly strange. The href is the proper way to do it but I guess it works now so…
You’re welcome.
Try taking the filename off the end of the base - You can’t make href references in the page relative to a file. you can only make them relative to a folder. The base should be specifying the folder they are to be relative to.
Hi Felgall,
I don’t understand your comment. Can youpost an example of the way the code should look?
It should look like this:
<base href="http://handofflabs.com/">
OK. Thank you for your additional information. There is no way I would have known that is a thing. You are saying that the base is only the link to the root folder, not one each for the about page, comments page, etc.
Is that correct?
No - the base is what gets added to the front of all the relative addresses in the page so that instead of them being relative to the folder containing the current page they are relative to that folder instead.
If you want them relative to the root folder and the current page is in the root folder then you don’t need base.