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)
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 am facing a problem i have given the custom font. It is working in the website. I have given a iframe in the website and in this iframe custom font is not working it is loading the timer new roman font-family. How to resolve it if anyone have suggestion please share.
CSS rules (like the custom font setting) don't cascade through an iframe. One possibility would be to use the new seamless attribute:
<!doctype html>
<style>
/* custom font etc. */
</style>
<iframe seamless src="http://www.example.org/"></iframe>
<!-- now your styles are inherited by the embed website -->
Unfortunately, this attribute has currently very bad browser support, so an easier solution would be to include the relevant stylesheet in the page showed in your iframe.
I watched a flex tutorial and I found parts mentionning external and internal css. So what is the differences between the two ?
External CSS refers to a file location, ie
<link rel="stylesheet" href="your-file-here.css">
Internal CSS
Means that the CSS is included on the page, wrapped in style tags in the <head>:
So:
<style>
#wrapper { width:960px; margin:0 auto; }
</style>
When internally using CSS, styles can be used in what is called inline styles.
Which looks like:
<p style="color: #333; font-size: 22px;">Blah blah blah.</p>
The only real benefit to internal CSS, is that the browser doesn't need to make an additional GET request to download the .css file. But external is preffered. As it means you just need to modify the .css file, and it will be reflected in all pages which include a reference to that specific file.
Internal CSS
Defined inside <style> elements.
Embedded directly inside the page.
External CSS
Linked via the <link rel="stylesheet"> element.
Exists as a seperate file on the server.
The main advantage of an external CSS file, is that it can be cached independently from pages, meaning that the client only needs to download it once, which saves on loading times and bandwidth.
Also, by linking many pages to once CSS file, you only need to change one place, and have all of the site immediately affected (without having to go on every page and make the change).
An internal style sheet is a style tag in the head section of the page:
<style type="text/css">
body { margin: 0; padding; 10px; }
</style>
An external style sheet is a CSS file that is used by the page from a link tag in the head section:
<link rel="stylesheet" href="pagestyles.css" />
An external style sheet can also be specificed using the #import CSS rule, either from an internal style sheet or another external style sheet:
#import "otherstyles.css";
There is also a third type of css; inline styles that are specified on the element that they apply to:
<div style="background:#ccc;">
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.
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.