I'm integrating css to my JSF2 application and something isn't working with the fonts. This is how I try it:
The fonts are in WebContent/resources/fonts (on Eclipse.) In the same directory I have a stylesheet.css file, and I declare the font face like this:
#font-face {
font-family: 'TitilliumText22LRegular';
src: url('titilliumtext22lregular-webfont.eot');
src: url('titilliumtext22lregular-webfont.eot?#iefix') format('embedded-opentype'),
url('titilliumtext22lregular-webfont.woff') format('woff'),
url('titilliumtext22lregular-webfont.ttf') format('truetype'),
url('titilliumtext22lregular-webfont.svg#TitilliumText22LRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I connect to the stylesheet with this in the header.xhtml of my application:
<h:outputStylesheet library="fonts" name="stylesheet.css"/>
The css class element that tries to connect to this is in resources/css and is called style.css. The class itself:
.time {
font: 19px 'TitilliumText22LRegular';
text-transform: uppercase;
line-height: 1.8;
white-space: nowrap;
}
For all I can tell this should work. But it doesn't. What am I doing wrong?
Have you tried not using the shorthand font? Try just using font-family: 'TitilliumText22LRegular'; and see what happens?
Related
#font-face {
font-family: 'Snell Roundhand Script';
src: url('../fonts/snell-roundhand-script.eot');
src: url('../fonts/snell-roundhand-script.eot?#iefix') format('embedded-opentype'), url('../fonts/snell-roundhand-script.woff') format('woff'), url('../fonts/snell-roundhand-script.ttf') format('truetype'), url('../fonts/snell-roundhand-script.svg#Snell Roundhand Script') format('svg');
}
#font-face {
font-family: 'Baskerville Old Face';
src: url('../fonts/ufonts.com_baskerville-old-face.eot');
src: url('../fonts/ufonts.com_baskerville-old-face.eot?#iefix') format('embedded-opentype'), url('../fonts/ufonts.com_baskerville-old-face.woff') format('woff'), url('../fonts/ufonts.com_baskerville-old-face.ttf') format('truetype'), url('../fonts/ufonts.com_baskerville-old-face.svg#Baskerville Old Face') format('svg');
}
The above code is the font-face code
And below i am poting the css i have added:
.big-red-text{
color: #ff0000;
font-family: Snell Roundhand Script;
font-size: 50px;
text-align: center;
}
.big-orange-text{
color: #ff6600;
text-align: center;
font-weight: 600;
font-family: Baskerville Old Face;
}
Is there something missing in this? For it not to take the font into consideration? All the fonts are stored in the font folder in the root directory.
If your font name contains spaces, you have to enclosure it in single quotes.
Without spaces in the name you can lose the single quotes but I suggest to always use them to avoid mistakes.
So as Fundhor suggests it will work with
font-family: 'Snell Roundhand Script';
and
font-family: 'Baskerville Old Face';
Make sure your files are in the right place:
- css
-- fonts.css <-- here you are declaring your #font-face
- fonts
-- snell-roundhand-script.eot
-- etc...
Additionally include your fonts.css before you are using the font-family
Try with this :
.big-red-text{
color: #ff0000;
font-family: 'Snell Roundhand Script';
font-size: 50px;
text-align: center;
}
Did you purchase the font or font-family?
Url:https://www.fonts.com/font/linotype/snell-roundhand
The support team at fonts.com should be able to resolve your issue.
My CSS includes custom fonts such as:
#font-face {
font-family: 'AllerRegular';
src: url("http://domain/css/fonts/aller_rg-webfont.eot");
src: url('http://domain/css/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'), url('http://domain/css/fonts/aller_rg-webfont.woff') format('woff'), url('http://domain/css/fonts/aller_rg-webfont.ttf') format('truetype'), url('http://domain/css/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
height: 100%;
font-family: AllerRegular, sans-serif;
font-size: 12px;
color: #000000;
}
When loading the web page, several of the paragraphs sometimes seem to be "missing". In the Inspector, I then look at the body, uncheck the line that says font-family: AllerRegular, sans-serif;, then check it again. The text comes back!
Because of this test, I am assuming there is some issue in the order that the CSS and the fonts file are loaded.
Also note that the CSS file and the font files are not hosted on the same server.
I've used font-face for my website. it shows properly on all browsers except chrome.
what should I do?
CSS:
#font-face {
font-family: "B Yekan";
src: url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.eot');
src: url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.eot?#iefix') format('embedded-opentype'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.svg#B Yekan') format('svg'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.woff') format('woff'),
url('font/142272950-683a5dddcff7f1cbb08d964cc275cb50ce7840291901931.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
font-family: "B Yekan","Open Sans";
font-size: 13px;
line-height: 21px;
color: #626262;
}
Check if you have access from your style path to font folder. Is The font folder in the same folder of your style sheet file? try with absolute paths.
regards
I have a problem when I choose a font in a CSS file. The font doesn't appear correctly in local HTML code.
#main_menu ul li
{
border-left:1px solid #dad8d8;
font-family:"arabic transparent";
font-size:16px;
padding: 0px 20px;
color: #e2001a;
list-style: none;
display: inline;
font-weight: bold;
}
The font in the HTML file isn't like in the Photoshop design.
You better use #font-face from CSS3. Example from W3School:
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
You have to embbed the font
Use the following website for font generation
www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'YourFont';
src: url('YourFont.eot');
src: url('YourFont.eot?#iefix') format('embedded-opentype'),
url('YourFont.woff') format('woff'),
url('YourFont.ttf') format('truetype'),
url('YourFont.svg#YourFont') format('svg');
font-weight: normal;
font-style: normal;
}
You cannot just use any font on the web/in HTML. You have something called web-safe fonts and can add custom ones manual.
Check FontSquirrel for conversion techniques: http://www.fontsquirrel.com
If a font is on your local machine, it "can" work if the browser tries to look for it, but you can't rely on it as most other users that visit your website won't have it on theirs, making the font fallback to Arial or an alike default font.
Font-squirrel will give you these formats (name is an example);
arabic.eot
arabic.svg
arabic.ttf
arabic.woff
With all these included all major browsers should be able to read your custom font with the #font-face property:
#font-face {
font-family: 'arabic transparent';
src: url('arabic.eot');
src: url('arabic.eot?#iefix') format('embedded-opentype'),
url('arabic.woff') format('woff'),
url('arabic.ttf') format('truetype'),
url('arabic.svg#arabic_transparent') format('svg');
font-weight: normal;
font-style: normal;
}
#main_menu ul li {
font-family: 'arabic transparent';
}
I don't understand how to get this to work, any help would be appreciated;
I'm going off of what I got from this website: http://alistapart.com/article/cssatten
from my style.css
#font-face {
font-family: "JSL";
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.
However, you may need to have more versions of your font than just the true type. Have a look at Bulletproof #font-face Syntax.
You may use FontSquirrel’s generator to achieve this.
Here is an example of a #font-face embed in my application, which is pinned right at the top of my main css stylesheet.
#font-face {
font-family: 'JustVector';
src: url('../fonts/justvectorv2+webfont.eot');
src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
url('../fonts/justvectorv2+webfont.woff') format('woff'),
url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
font-weight: normal;
font-style: normal;
}
no
#font-face
Try get inport it:
#import_your_new_cssfile.css
whre you put:
font-face {
font-family: "JSL";
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Is perhaps the "+" sign in the font URL a problem? You might want to URL encode it.
Edit - after hitting the font URL, it looks like you should try to download the ttf file, and refer to it locally, rather than from a remote source. It's prompting me for a Captcha in order to download the file, which is probably why it's not working.
You do need to download the file and refer to it locally,
The link supported there is a download link and requires a Captcha to be downloaded which means it is NOT a direct link to the TTF File.
Depending on the Font you may need to use:
#font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'),
url('path/to/font/someFont.woff'), format('woff'),
url('path/to/font/someFont.ttf'), format('truetype'),
url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}
and in CSS:
BODY
{
font-family: 'someFont', Fallback, sans-serif;
font-size: 12px;
...
}
This worked for me when I had issues wityh embedding a custom font.