I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.
In my XHTML i mentioned the CSS Path,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,
#font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') #ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?
You should use google fonts, its really easy to use.
https://www.google.com/fonts#UsePlace:use/Collection:Robot
example
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.
Note: Some browsers supports different font type that's why you need
ttf,svg or eot.
#font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
Remember after that you need to add this code in class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
The error is in defining a font named roboto-bold in the #font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!
Solution: make sure the names match.
You probably meant
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand
font:italic 25px 'roboto-bold';
And there's no need for the !important.
Why not use Google fonts?
Place in the header of your html:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
Use in your css:
font-family: 'Roboto', sans-serif;
its really easy to use in css.
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
Related
I have a bunch of CSS document, that has some #font-face rules, I want to check these #font-face which are used and which are not used in a HTML Document or Website. So, should I check these #font-faces used in it's defined CSS Document or all CSS Documents with inline Style tags in HTML Document?
The question is, this;
File Name: style.css
#font-face {
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}
/* This tag can use the #font-face, because this .any-class rule in same CSS document */
.any-class {
font-family: 'FontAwesome',
font-weight: normal;
}
File Name: another-style.css
/* Can this CSS Class use the #font-face in style.css ? */
.any-other-class {
font-family: 'FontAwesome',
font-weight: normal;
}
File Name: index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
/* Can this .custom-class CSS Selector use #font-face in style.css ? */
.custom-class {
font-family: 'FontAwesome',
font-weight: normal
}
</style>
</head>
<body>
<!-- Can this DOM Element use #font-face in style.css? -->
<p style="font-family: 'FontAwesome'; font-weight: normal;">Hello!</p>
</body>
</html>
Yes, everything you have here will just work, as long as you include style.css wherever you want to use your web font, e.g. the way you have done using link. Your #font-face rule, like any other CSS rule, does not have to appear in the same stylesheet as the CSS rules that reference it, or in any HTML with inline styles that reference it.
I'm trying to use and italic with google fonts and it's not working at all.
I included this line on my HTML.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400'
rel='stylesheet' type='text/css'>
For example, when I use the code below, all the texts look "normal" without bold and italic as expected. Any suggestions?
Thanks.
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the font according to its instructions (unless you understand well how the font works and can knowingly deviate from the instructions). In the interface, select Normal (selected by default), Normal Italic, and Bold, if you want just normal, italic, and bold (but not italic bold). Google then tells you what link element to use. And it works:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700'
rel='stylesheet' type='text/css'>
<style>
p { font-family: Open Sans }
</style>
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the 700 font declaration:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
or, as in your example:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
and then:
.yourClass {font-family: 'Open Sans'; font-weight: 700;}
The same way for the italic, as it is claims when you define your CSS font-type, and in the guide.
I have a font namely SourceSansPro, and I include it in my css as follows:
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Bold.otf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Regular.otf");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Light.otf.otf");
font-weight: lighter;
font-style: normal;
}
It's rather redundant. Isn't there a neater way to do this?
Unfortunately the #font-face syntax is not very flexible. You're at the mercy of the browser developers in this case. You can, however, segment your fonts into a fonts.css file and just do an import:
#import url('css/fonts.css');
Another possible solution would be to add the font via Google's Font API. That way, you don't have to worry about the CSS in the first place. You just add
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
to your stylesheet. Or you can add
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
to the <head> of your document.
It is not essentially redundant, since you are using three typefaces and they need to be declared separately. You can, however, omit the declarations font-style: normal and font-weight: normal, since they correspond to defaults.
On the other hand, the code works only on browsers that support OTF as the format of downloadable fonts. Use e.g. http://www.fontsquirrel.com/tools/webfont-generator to generate other formats and code for taking them into use.
The font-weight: lighter probably works in most situations, but it is illogical (using relative keyword when you should specify the actual weight) and should be replaced by font-weight: 200, which corresponds to the actual weight of the typeface
Well, you're obviously going to need to change the font-family name for each one or I would think that having them all the same would make them clash. At least I would think that. I have never had it happen to me, but if it's not working, then do that. But if not, ignore this.
As for the #font-face simplicity, the only real specifications you need for the #font-face is the font-family and the src. That calls the font style, obviously. So any other web styling you can leave to either the html style or css.
#font-face {
font-family: "SourceSansPro";
src: url("../font/SourceSansPro-Light.otf.otf");
}
You can then style your font in either a span or css class.
<span style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</span>
<div style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</div>
<div class="myspecificstyle">Styled Font</div>
If you have a lot of fonts, I would just put them all in one css file and then link it to the page you're using them on.
<link rel="stylesheet" type="text/css" href="myfonts.css">
I downloaded the font from this site:
http://www.fontsquirrel.com/fonts/Hattori-Hanzo
Here's my code:
<style type="text/css">
#font-face {
font-family: 'HattoriHanzoLight';
src: url('hattori_hanzo.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body style='font-family: HattoriHanzoLight; font-size: 19px;'>
content
</body>
My html file and my font file are in the same directory.
Why do I still see the default font?
This code is working for me so the only way this won't work is because you either have;
the file permission is not correct
the file (from the archive is capitalize and not in your code is not)
you copy and paste from a source that has an invisible character
I never see Computer Modern font, the one shipped as default for LaTeX type setting system, on any webpage.
How to change the CSS so that font will actually work?
Using the Computer Modern font in webpages has become very easy! Just paste the following lines of CSS code in the head section of your html code in order to activate the sans-serif version of that font.
<style type="text/css">
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
font-weight: bold;
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
font-style: italic, oblique;
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
font-weight: bold;
font-style: italic, oblique;
}
body {
font-family: "Computer Modern", sans-serif;
}
</style>
Note that the solution here makes the browser load the current version of the fonts from a CTAN mirror, which can be very slow. This is okay for testing purposes, but in the long run I'd recommend you download these .otf files to your own webserver.
You can just insert the https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css css-stylesheet into your html header. Like this:
<head>
<!-- ... -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
<style>
body {
font-family: "Computer Modern Sans", sans-serif;
}
</style>
</head>
You can use the font for production websites with any amount of traffic. Files are served via MaxCDN's super fast global CDN. There is no traffic limits or throttling.
The README.md on Github
Just for anyone in 2020 and onwards still looking for the optimised web fonts rather than the larger .otf fonts which are used in the answers above, I've hosted the Computer Modern font family via the jsDelivr CDN.
To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:
https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css
Example Code:
<head>
<!-- Other imports... -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css">
<style>
body {
font-family: "Computer Modern Serif", serif;
}
</style>
</head>
Check out the documentation here
Nowadays you can download everything you need (font files and css) from this webpage:
http://checkmyworking.com/cm-web-fonts/
Then the only thing you need to do is to add the corresponding css files to the header section of your html file like:
<head>
<meta charset="UTF-8" />
<title>Test</title>
<!-- Computer Modern Serif-->
<link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
...
</head>
you cannot, up until CSS 2.1 you can only use the fonts that are ACTUALLY installed on the client's computer. In CSS 3 there are some ways to embed fonts in your webpage but those ways are not greatly supported by browsers yet.
Have a look here: http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm
#font-face {
font-family: "Computer Modern ";
src: url(ace.ttf);
}
.cm {
font-family: "Computer Modern";
}
You do need to have a ttf file for that font.