I am new in rendering fonts with #font-face. I am using Gill Sans font family in my design.
I did research to understand make it work for me but I am not able to understand how to use it. The font type I am using dont have .eot and .woff font type. I can just see gill sans font true type font in my font folder.
I would like to see if anyone can help to understand how it works and make it easy for me to use this.
I am not able to understand what is happening in the below code.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Unfortunately, different browsers want fonts in different formats. You can generate the other formats from your .ttf file here:
http://www.fontsquirrel.com/tools/webfont-generator
You can then use your font in CSS using the name you defined (MyWebFont).
body {
font-family: MyWebFont;
}
Related
I'm using a font called "DejaVu Sans" that does not exist in google fonts
body{
font-family:'DejaVu Sans' , tahoma;
}
I uploaded the font with different extensions to my website but it takes time to execute on the text on my website, I think it waits for the whole website to load first.
Is it better to upload the font files to a CDN or a files cloud and then use it on my website, or there is a better way?
you should use font face like this :
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
then you can use the font wherever you want
The font load time depends on the font file size. You can use font face kit provided by font-squirrel : https://www.fontsquirrel.com/fonts/dejavu-sans
To improve loading time you can wisely choose the required font formats to bind with your website font face.
To get more information about loading time you can refer below link, which will helps a lot.
https://www.smashingmagazine.com/2011/03/the-font-face-rule-revisited-and-useful-tricks/
use #font-face instead.
Upload your .ttf files and convert them to .woff, .woof2 etc that is needed for font face.
Here is the link for standard #font-face example :
#font-face
Use online converter here: webfont converter
This question already has answers here:
What is the status of TTF support in Internet Explorer?
(2 answers)
Closed 8 years ago.
In my CSS style sheet, the first entry is
#font-face {
font-family: "Font";
src: url(link) format("truetype");
}
p.customfont {
font-family: "Font", Verdana, Tahoma;
}
This is not a font commonly installed on computers. Chrome loads this font and uses it in the correct places, but IE 9 will not. Now as a lot of people still use IE, this got me worried. I tried on a lot of other computers, and chrome works fine on all, but IE also fails on all.
How can I fix this?
EDIT: For future reference - http://everythingfonts.com/font-face converts the ttf for you to all the formats needed, and creates the css - so a lot of time saved
Generally you should use eot, woff, ttf and svg to support all browsers.
Example:
#font-face {
font-family: 'font';
src: url('../fonts/font.eot'); /* IE9 Compat Modes */
src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/font.woff') format('woff'), /* Modern Browsers */
url('../fonts/font.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/font.svg#PlanerRegular') format('svg'); /* Legacy iOS */
}
I am making a website for a friend of mine. He is very specific about the font on the page.
I have downloaded a custom font from the Internet, but the weird thing; it's only working in Internet Explorer (what a suprise).
This is my code:
#font-face
{
font-family: eurostile;
src: url(../font/eurostile.ttf);
}
#font-face
{
font-family: eurostile;
src: url(../font/eurostile.eot);
}
And this is how I am calling the font-family:
p
{
font-family: eurostile;
}
etc... What am I doing wrong?
You'll need to format it in a cross platform style. Look here.
The problem is that different browsers support different font styles.
Something like:
#font-face {
font-family: 'fontMN';
src: url('/fonts/font_font-webfont.eot'); /* IE9 Compat Modes */
src: url('/fonts/font_font-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/font_font-webfont.woff') format('woff'), /* Modern Browsers */
url('/fonts/font_font-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/font_font-webfont.svg#fontMN') format('svg'); /* Legacy iOS */
}
Would work.
You will need to acquire the formats that are valid for the browsers you're looking to support, as seen above.
Browser use different formats. IE uses the eot format, most use woff, but some use svg or ttf/otf.
Check this out:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
You can create all these fonts by uploading a ttf/otf to fontsquirrel and using it's converter:
http://www.fontsquirrel.com/tools/webfont-generator
http://jasonlau.biz/home/css/embedding-custom-fonts-with-css
If you ever need to embed custom fonts in your website, this bit of CSS will accomplish the task. Follow the steps below to embed custom fonts in your website.
Use this tool to generate the font-face rule - http://www.fontsquirrel.com/tools/webfont-generator.
I am using a font for my site which is stored under my project folder as fonts
and i used this code in css.
my css
#font-face
{
font-family: buddys;
src: url('/fonts/Kristen-ITC-Regular.ttf'),
url('/fonts/Kristen-ITC-Regular.eot'); /* IE9 */
}
its working on localhost while its uploaded to live the font style not apply on my site. How to make it work on live site.
Thanks.
As you're using Visual Studio, you need to set the Build Action for each of your webfonts to 'Content' under properties. If you don't do this, your font files do not get included in the deployment package and never make it to your server.
Also, I would suggest improving your #font-face code in your CSS to include all formats (you can use font squirrel to help with this: http://www.fontsquirrel.com/fontface/generator). Also worth a read is this article on the most compatible code to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Are you sure the actual font is uploaded to your webserver and the path is correct?
I'd suggest specifying all of the image files:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
To generate them all from the font-face file, just use a tool like this
Your font path is absolute. Check it.
If your css file is in the folder named: 'css' and fonts dir and css dir is in the same folder named 'assets'.
Then:I think your css code should be:
#font-face
{
font-family: buddys;
src: url('../fonts/Kristen-ITC-Regular.ttf'),
url('../fonts/Kristen-ITC-Regular.eot'); /* IE9 */
}
I'm working on a website that requires font trials online, the fonts I have are all .otf
Is there a way to embed the fonts and get them working on all browsers?
If not, what other alternatives do I have ?
You can implement your OTF font using #font-face like:
#font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
#font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}
// Edit: OTF now works in most browsers, see comments
However if you want to support a wide variety of browsers i would recommend you to switch to WOFF and TTF font types. WOFF type is implemented by every major desktop browser, while the TTF type is a fallback for older Safari, Android and iOS browsers. If your font is a free font, you could convert your font using for example a transfonter.
#font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
If you want to support nearly every browser that is still out there (not necessary anymore IMHO), you should add some more font-types like:
#font-face {
font-family: GraublauWeb;
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.woff") format("woff"), /* Modern Browsers */
url("webfont.ttf") format("truetype"), /* Safari, Android, iOS */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}
You can read more about why all these types are implemented and their hacks here. To get a detailed view of which file-types are supported by which browsers, see:
#font-face Browser Support
EOT Browser Support
WOFF Browser Support
TTF Browser Support
SVG-Fonts Browser Support
From the Google Font Directory examples:
#font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
This works cross browser with .ttf, I believe it may work with .otf. (Wikipedia says .otf is mostly backwards compatible with .ttf) If not, you can convert the .otf to .ttf
Here are some good sites:
Good primer:
http://www.alistapart.com/articles/cssatten
Other Info:
http://randsco.com/index.php/2009/07/04/p680