We have a web application. The application runs on both Windows and Linux.
On windows, the application works fine (Layout is proper etc.)
On linux, the complete layout is haywire. I figured there is a font's problem on Linux.
On my JSF page, I have specified Calibri font. I am using JBoss server.
How can I ensure the layout on windows and linux is identical. I need to eliminate the Fonts problem.
I tried installing the Calibri fonts on the server, but this becomes a pre requisite before any installation which surely I would like to avoid.. Infact even after installing I could not notice changes in the layout (this indicates app failed to read the font).
Kindly guide.
Is it possible to bundle fonts in JBoss and ship it along with the application. If yes, how can I instruct my application to use fonts present inside JBoss.
You can use the #font-face CSS, as described here:
Define a new font, named myFirstFont:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
And use it to style an element:
.myFirstFontStyledThing {
font-family: myFirstFont;
}
This means that the font file must be available from the web. So you either host it in your server (besides your images perhaps - BUT BEWARE THE LICENSING OF THE FONT) or use Google fonts: http://www.google.com/fonts/
if you are defining fonts you are using most probably a css line like that:
font-family: Arial, Calibri, sans-serif;
css is 'cascading' so in this case if neither arial nor calibri are found sans-serif evaluates to a default sans-serif font on your machine - on Windows - Arial on Mac - Helvetica, on Linux it might be something else.
A good tip would be to use Google's Fonts this way you make sure everyone gets the same font and you don't need to install anything on your JBoss and save you some traffic couse it uses CDN!
Related
Custom fonts are not showing up on my app.
I did some googling, pretty sure I named everything correctly, font files are in the correct folder. Not too sure what's going on.
This is how I'm using it in app.css:
.pontanosans-regular {
font-family: "PontanoSans", "PontanoSans-Regular";
font-weight: 400;
}
I am then using this class in the other folder/files like so:
class="pontanosans-regular"
This is what the folders look like:
As per {NS}
Note: In iOS your font file should be named exactly as the font name.
If you have any doubt about the original font name, use the Font Book
app to get the original font name.
and Pontano Sans name in mac is having a space between 2 words. So your family name should be like this.
font-family: "Pontano Sans", "PontanoSans-Regular";
I ended up running into this issue and the problem I found was that my .ttf file was buggy. I tried downloading a common webfont and it worked just fine, so some fonts are just buggy.
To fix my issue, I found the original font on a different site.
I want to install a custom font on a website, does anyone know if .ttf format is enough?
Thanks!
If you want to use a custom font on your website, I recommend using one of Google web fonts. You will find more info here.
If the font you want to use is not on the list. I recommend using font-squirrel and create a font-face kit with their generator.
To work on a larger range of browsers, you should use .ttf, .eot, .svg and .woff.
Hope it helps.
TTF will work for most modern browsers. Of course, you may offer several alternative font formats to the user agent - it surely won't hurt )
Here is the compatibility table for TrueType fonts:
http://caniuse.com/ttf
In your CSS, declare the font as follows:
#font-face
{
font-family: my_font;
src: url('my_font.ttf');
}
And then use the font-family property it as usual:
.my_selector
{
font-family: my_font;
}
Default fonts on my site are defined in an external stylesheet as:
body { font-family: Arial; font-size:62.5%;}
This works fine in Windows and Mac.
To test my site I installed Linux Mint 13 (Mate) and loaded a selection of browsers from the Repository. I made two installations on separate PC’s. I left all browser settings as their defaults.
Firefox, Opera, Konqueror and Reconq displayed my pages as expected.
Web (Epiphany) overrides the default font style (i.e. it is not Arial) and also displays too large a font size.
Midori displays too large a font size. (installed in windows, midori displays the correct font size).
I believe Web (Epiphany) is designed principally for the GNOME desktop environment and maybe this is a factor or do I need to design differently for these two browsers to make them display the fonts correctly in Linux?
It seems that some distributions of Linux don't include the Arial font. I added Liberation Sans as an alternative font and this seems to be okay.
I don't understand however why some of the browsers didn't need this. Unless they include the font with the browser or accurately map some alternative?
I was searching through the net and couldn't find the exact answer.
How do browsers get the exact .ttf file for a font family specified in the css? Does it already have it in its code or does it pick from the user's system. I guess we can always specify the custom font files using the #font-face but what about the normal general fonts like arial etc?
The process is obviously different between browsers and operating systems, but in short, browsers pick the font from the system, and if it’s not installed, the font will be replaced with another similar font.
I have a CSS style which displays a png image in background. It works well in all browser, except in ie6.
In ie6 the bacground image is stretched to fit the block. How do I solve this ? Here's the CSS which I'm using to do this.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
IE7 / FF3.5
IE6
You probably use a png transparency fix script for IE6, I think the problem lies there because it probably applies a scale method.
Read the comments on this page.
The documentation of your png transparency fix will probably cover this.
I personally found using transparent pngs in IE 6.0 to be a major pain in the ass despite all the various fixes out there. I know this is not an original answer, but I would probably just do a conditional check and replace the image with a gif or jpg version if you really need to support IE 6.0 here, instead of relying on hacks to support this. Or just drop IE 6.0 already, this year, I've talked every single client into not supporting IE 6.0 on their new projects. Seriously, it's about damn time that thing stopped making our professional lives so god damn miserable.
If you're using the AlphaImageLoader filter, make sure sizingMethod='scale' is not present. Remove it or set it to image instead of scale.
Belatedpng is the best script I have found for this problem:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
set actual width and height for the background image and background-position.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
background-position:left;
width:251px;
height:72px;
background-repeat:no-repeat;
}
here width and height are actual size of the error.png image. hope it helps.