I've got a custom font setup on my site using #font-face in my stylesheet. It works just fine on my main page, but if I try to read the same stylesheet through another html file in a different directory, all of the styling will work fine except for the font.
The stylesheet (style.css) and font are in a /style/ directory.
The html file is in a sub-directory, and I'm reading the stylesheet using this:
<link href = "../style.css" type = "text/css" rel = "stylesheet"/>
Again, it'll use all of the styling except the custom font. Why's that?
You should always use either absolute URLs (with the full domain name and everything), or URLs relative to the domain root (/path/to/font.ttf) to prevent confusion as to whether the font is being loaded relative to the stylesheet or the document.
Related
I have issue to get a #font-face css custom URL working for my wordpress theme. This is my setting:
Did I do correct if yes why the font doesn't work?
If your site runs on HTTPS you must make sure the font does too. Otherwise it will be considered a security risk and then blocked (see the developer console (press F12) in your browser for such a message).
Add to the head section of web page
<link href="http://db.onlinewebfonts.com/c/73e731edac53f3db38b78336dff84fb2?family=Graphik+Web+Extralight" rel="stylesheet" type="text/css"/>
or, Using #import CSS directive, put the following line in add to your css file
#import url(http://db.onlinewebfonts.com/c/73e731edac53f3db38b78336dff84fb2?family=Graphik+Web+Extralight);
and write this font wherever you need it.
font-family: "Graphik Web Extralight";
I want to use a custom font on my website. I am using the custom font on one CSS sheet and I have already specified it with
#font-face{
}
I'm using the same font on another CSS page. Do I have one again specify the font with the #font-face on the other CSS page? Or is specifying it on just one styling sheet enough?
There is no such thing as "CSS pages". There are HTML pages, which can use CSS stylesheets. You write a stylesheet that includes your #font-face rules as well as normal styling rule, and then include those on your HTML page using
<link rel="stylesheet" href="yourstylesheet.css">
and you add that to every HTML page that needs to load that particular set of CSS instructions. So, say you have two pages, "index.html" and "about.html", both html files need that <link...> code.
(Also note that in HTML5, there is no .../> or ...></link> at the end of that)
I noticed that when my web page was loading, all of the CSS files loaded first, then the fonts after all of those were done. Is there a way to make the fonts start loading at the same time as the stylesheets?
I'm using #font-face with a url. Would encoding the font in the stylesheet solve this problem?
i haven't experienced this kind of scenario of yours..i'am fond of using embedded fonts on my webpages..i would like to share what i did as what i see to make them synch on web page load..i have a font.css where i embed all the fonts i needed like this:
#charset "utf-8";
/* CSS Document for Fonts :)*/
#font-face{
font-family: trajan;
src:url(../fonts/TrajanPro-Regular.otf);
}
and the url resides on the directory inside the web app..i just link this to the web page then use the defined font on other css directly..hope i got your point and explained the right thing..thank you
I am trying to include a custom font into css using the data-uri-scheme. CQ5 (I'm using version 5.5) is adding the path from the clientlib directory to the location where the css file with the data-uri-scheme font data is located.
So instead of just ignoring the css property:
#font-face {
font-family: 'CustomFont';
src: url(data:application/x-font-woff;...
...
}
CQ5 does the following:
#font-face {
font-family: 'CustomFont';
src: url(desktop/css/data:application/x-font-woff;...
...
}
Is this a bug in CQ5.5 or can I add/do something to prevent the addition of "desktop/css"?
The result is, I'm getting 404 HTTP status because the font is "not found".
[UPDATE]:
The css file is included in the base.jsp in the html <head> section.
<link rel="stylesheet"
href="/etc/designs/myproject/clientlib/desktop.css" type="text/css"/ >
Location of base.jsp:
/apps/myproject/pages/base/base.jsp
Location of css.txt:
/etc/designs/myproject/clientlib/desktop/css.txt
It looks like a bug. The CSS is passed through a method that specifically looks for url('{}') in the CSS files concatenated together to create the combined CSS file - CssFileBuilder#resolveUrl(String[], String[], String). This method doesn't appear to take into account the data scheme, instead it only skips modifying the URL if it has a length of 0, starts with a slash (/) or matches the pattern "^[A-Za-z][A-Za-z0-9+\-.]://." (effectively external links). My assumption would be that it does this in order to modify relative url('{}') values, but they didn't take into account the data scheme.
I'd recommend opening a Daycare ticket with Adobe to update this method to support the data-uri-scheme.
It's a bug, will be fixed with 5.6. Including the individual css file directly (as mentioned) avoids the clientlib rewriting, otherwise I don't know of a workaround inside a clientlib.
The reason is that clientlibs are rewriting the relative paths because the base changes from the individual css file to the concatenated clientlib css. "data:" uris were simply not considered properly here.
Two strategies for working around CQ5's (usually helpful) link rewrites:
(1) Place the #font-face code in the external .css file(s) that is assembled for you by CQ5. Instead of using the <cq:includeClientLib> tag to include it in your HTML, you might find that you have to explicitly code the <link> tag, e.g.:
<link rel="stylesheet" href="<%= currentDesign.getPath() %>/clientlibs/themes/default.css" type="text/css" media="screen" />
(2) Inject the #font-face code with a document.write() call:
<script type="text/javascript">
document.write("#font-face { font-family: 'CustomFont'; src: url(data:application/x-font-woff;
...}");
</script>
Without having checked what caused the misplaced rewriting I assume it was the Day CQ Link Checker Service.
You might want to add a Special Link Prefix or Special Link Pattern to prevent this pattern to be identified as link and being rewritten at all.
So just add your custom linkchecker configuration unter /apps/.. (overlay of corresponding config under libs) with the mentioned changes and you should be fine.
I'm trying to style a font that is being referenced inline using fancy box on a wordpress blog. Using both chrome and firefox.
I've tried this two ways:
1.) Loading the #font-face on the theme's stylesheet, then adding a in html markup on the page itself. I don't want all of the paragraph text on the blog to load with that font, just the divs inline on the fancybox. I know all the sources are correct because I've tried them in html files and they load perfectly.
2.) I've tried loading the #font-face on the page html markup itself. I add a style and place the call in that style at the top of the page. Then I reference the font-family in the same way that works in the normal html page.
The fact that it is working on a simple html page makes me think I'm doing something wrong specifically in wordpress.
Here is the url to the page: http://elparquenuez.com/sandbox/wordpress/?page_id=4
Click on the first image to load the fancy box.
There is little that is correct about this code you have:
<style type="text/css">
<p>#font-face {
font-family: "fanwood";
src: url(http://localhost:8888/html5/fanwood/Fanwood.otf);
}</p>
</style>
Consult http://reisio.com/examples/webfonts/ or http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/, and keep in mind that you're going to want everything on the same domain.