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;
}
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 was browsing SVG fonts in MDN, where it is mentioned that <font-face>, <missing-glyph>, <hkern> and <vkern> are depreciated. Only <glyph> is not depreciated. It does not mention anything about a recommended way of specifying the font face properties.
The W3C SVG recommendation also does not say anything about an alternative way of specifying SVG fonts, apart from noting that everything in the <font-face> can be done equivalently in CSS. It does not provide any alternative for <hkern> or <vkern>. I intend to create a standalone SVG file, not to be modified by the site CSS, so I would like to keep the whole font definition in the SVG.
So, what is this obscure new way of specifying SVG fonts?
"SVG fonts" as a data file that uses SVG markup to define a font resource has been deprecated; it turned out to be a bad idea, and ended up not addressing the issues that typography on the web needed addressing. It was added in SVG 1.1 but removed again in SVG 2.0, and almost all browsers that did end up adding support for it removed that support again since.
Instead, all browsers now support "webfonts": regular OpenType fonts packed for the web using the "Web Open Font Format", aka WOFF/WOFF2, based on the OpenType format, which supports several different outline types:
TrueType (quadratic curves and compound glyphs, often with ttf extension, but the extension is literally irrelevant)
Type2 in CFF/CFF2 (cubic curves and arbitrary subroutines, often with otf extension, but again: the extension is wholly irrelevant)
Embedded bitmaps (yes, OpenType fonts can indeed be true bitmap fonts, with as many different bitmaps as necessary to cover as many pixel sizes as necessary)
SVG (that might be surprising, but SVG is the exact same kind of vector graphics language as TT and CFF/CFF2 are, so it made sense to allow glyph outline data to be specified using SVG as well, particularly for fonts that need explicit colour palettes, like emoji fonts)
So if you absolutely need to keep your SVG data around, then make yourself an OpenType-with-SVG-outlines font, and then pack that for the web as a modern WOFF2 (or older WOFF) and you're good to go. There are plenty of online tools to do that for you, but you can also just use something like the open source FontForge application if you want a font that only includes what you need, instead of what online tools foist into them.
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!
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 am investigating the usage of SVG fonts in #font-face declaration. So far, only Safari 4 and Opera 10 seem to support it. Firefox 3.5 does not support it but there is a bug report but no fix has been supplied yet (though there are patches).
I am wondering, with #font-face support in major browsers, what is the advantage of using SVG font format in lieu of TTF/OTF/EOT formats? The only advantage I can glean from the discussion linked above was that you can add your own missing gylphs to fonts that do not support them yet.
Is there any other reason to specify SVG fonts in CSS?
It seems to be the only way to use web fonts on Mobile Safari. So that's a pretty big advantage if you're developing for iPhones and iPads. Font Squirrel's #font-face generator can create the appropriate SVG file and CSS syntax from any OpenType font.
The W3C states these advantages:
One disadvantage to the WebFont facility to date is that specifications such as [CSS2] do not require support of particular font formats. The result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all user agents.
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a 'text' element which references this font.
But the point of a common format doesn't really count because of the lacking browser support.
svg webfonts cannot work within an offline webapp. You can see an example here: http://straathof.acadnet.ca/beta2.2 Save this file to an idevice homepage, turn on airplane mode and open it. The svg fonts and the naming system used cause the font url to fail.
hopefully Apple fixes that soon.