i have tried adding a font to my webpage using #font-face rule but its not showing
HTML
<!-- language: lang-html -->
<ul>
<li>GREAT</li>
<li>BITE</li>
</ul>
CSS
<!-- language: lang-css -->
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
you can download the font from here : http://www.moldire.com
You need to put font-face in top of CSS.
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
li
{
font-family:Armata;
}
or if u want to use it for full page then apply it to body tag
Here are my steps to have the font working:
Font face first in css (already mentioned)
Have the type/format of font - EX: src: url(Armata-Regular.ttf) format('truetype')
Make sure your host (local or not) has the MIME type for these fonts
Lastly, would you consider a web font path? Save yourself time by getting a web path embedded font: http://www.google.com/fonts/specimen/Armata
Doing this will save you time skipping last bullet.
Use this on your website
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
and in CSS you will need this :
font-family: 'Armata', sans-serif;
Related
I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug"
I have it downloaded locally - is there a simple CSS trick to accomplish this?
Yes, you can use the CSS feature named #font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.
You declare it in the CSS like this:
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
#font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Then, you can just reference it like the other standard fonts:
h3 { font-family: Delicious, sans-serif; }
So, in this case,
<html>
<head>
<style>
#font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>
And you just need to put the JUNEBUG.TFF in the same location as the html file.
I downloaded the font from the dafont.com website:
http://www.dafont.com/junebug.font
You can use #font-face in most modern browsers.
Here's some articles on how it works:
http://webdesignerwall.com/general/font-face-solutions-suggestions
http://webdesignerwall.com/tutorials/css3-font-face-design-guide
Here is a good syntax for adding the font to your app:
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
Here are a couple of places to convert fonts for use with #font-face:
http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/
http://www.font2web.com/
Also cufon will work if you don't want to use font-face, and it has good documentation on the web site:
http://cufon.shoqolate.com/generate/
For the best possible browser support, your CSS code should look 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 */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For more info, see the article Using #font-face at CSS-tricks.com.
Try this
#font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
}
<div class="FontMarket">KhonKaen Market</div>
vilis.org
If you are using an external style sheet, the code could look something like this:
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:
<link rel="stylesheet" href="css/styles.css">
in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the class="junebug" inside any tag in your html to use Junebug font in that element.
If you're putting the css in the actual web page, add the style tag in the head of the html like:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
And the actual element style can either be included in the above <style> and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
and
<h1 class="junebug">This is Junebug</h1>
And the least acceptable way would be:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
and
<h1 style="font-family: Junebug;">This is Junebug</h1>
The reason it's not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.
there is a simple way to do this:
in the html file add:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Note: you put the name of .ttf file you have.
then go to to your css file and add:
h1 {
color: blue;
font-family: vermin vibes;
}
Note: you put the font family name of the font you have.
Note: do not write the font-family name as your font.ttf name
example: if your font.ttf name is: "vermin_vibes.ttf" your font-family will be: "vermin vibes" font family doesn't contain special chars as "-,_"...etc it only can contain spaces.
I am building a website for school, and want to use a special font, but when I import it, it doesn't show the font. I tried using the #face-font{font-family: something; src: url(font.ttf); The css I use it on looks like this: header{font-family: something;}And I tried this also with a .otf file, but that didn't work either. I also tried <link ref="font" href="font.ttf"> And also this with a .otf file. But in al cases the font didnt show up. Is it my fault in some code, or is the font just not useable? The link to the font is: http://www.fontspace.com/darrell-flood/quiet-meows
To include the custom font you'll need this somewhere in your CSS:
#font-face {
font-family: 'QuietMeows';
src: url('../fonts/quiet_meows.ttf') format('truetype'),
url('../fonts/quiet_meows.otf') format('opentype');
}
After downloading the font you will need to move it into your project, I put it into a fonts folder and renamed to be quiet_meows.
Then you can use it in your CSS like this:
p {
font-family: 'QuietMeows';
}
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
#font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The #font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
The problem was fixed by adding the format tag. After this, the font did show up on the page. The end looked like this.
#font-face{
font-family: "quiet meows";
src: url('font.ttf') format('truetype');
}
I am using webfont in my website, sometimes font which i desired is not applied to text, In order to overcome that i want to load font while building CSSOM it self, so I tried this
body style="font-family: 'customfont'; src: url('XXXX/custom-font.woff2')"
I tried this also
body style="font-family: 'customfont';
But of no use.
You should use font-face inside style tag It might work and it's pretty fast and clean (Put it in head )
<style>
#font-face{
font-family:custom1;
src:url(XXX/fonts/XYZ.ttf);
}
</style>
then use like `style="font-family: 'custom1';
I hope It would be HelpFull
#font-face {
font-family: myFont;
src: url('XXXX/custom-font.woff2');
}
div {
font-family: myFont;
}
Try to #font-face Rule
For inline use in HTML:
<style>
#font-face{
font-family: fontname;
src: url(fontdirectory);
}
</style>
Otherwise, put this in your CSS:
#font-face {
font-family: fontname;
src: url(fontdirectory);
}
Then apply the font to the elements you want.
Alright, I'm a CSS newbie so here we go. In a template I'm using there's a stylesheet
head {font-family:Verdana; font-size:16px; color:#000000;}
body
{font-family:Verdana; font-size:12px; color:#ffffff}
a
{color:#ff0000; font-family:Verdana; font-size:30px;}
bluetext
{color:#0000ff;}
tooltip{font-family:Verdana; font-size:11px;
color:#ffffff;}
So I figure it's determining what the font should be for each of these sections. What do I do if I want to use a custom font instead of Verdana for all of these sections? I have the .ttf file, but I don't know what else to do.
Thanks in advance!
First generate font for all browser like woff for Mozilla, eot for IE etc. So, you can generate from http://www.fontsquirrel.com/fontface/generator & http://www.font2web.com/ .
Then write #font-face in your CSS.
#font-face {
font-family: 'font';
src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype');
}
body{
font-family: 'font';
color:#fff;
font-size:12px;
}
.head {font-size:16px; color:#000000;}
a {color:#ff0000; font-size:30px;}
.bluetext {color:#0000ff;}
.tooltip{font-size:11px;}
You need to use font-face for that. The basic implementation is:
#font-face {
font-family: CustomFontName;
src: url(http://path-to/customfont.ttf);
font-weight:400;
}
Then just use it like any other font in any other style rule.
p {
font-family: CustomFontName, Helvetica, Arial, sans-serif;
}
You must use this into your css file :
#font-face {
font-family: your_font;
src: url('your_font.ttf');
}
In order to work on IE, you should export another version of your font with .eot extension, and add another src property.
Edit:
Here is an usefull link about using #font-face : http://www.webistrate.com/css3-custom-fonts-using-font-face/
Just first install this font on your server/system/root.
& then apply like this in your css
#font-face {
font-family: 'myriadproregular'(i.e.custom font name);
src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
and if you want more than one font you can do the same
#font-face {
font-family: 'myriadprocond';
src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprosemibold';
src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}
just use the font name where ever you want to use
such as
p
{
font-family:"custom font name"
}
I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug"
I have it downloaded locally - is there a simple CSS trick to accomplish this?
Yes, you can use the CSS feature named #font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.
You declare it in the CSS like this:
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
#font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Then, you can just reference it like the other standard fonts:
h3 { font-family: Delicious, sans-serif; }
So, in this case,
<html>
<head>
<style>
#font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>
And you just need to put the JUNEBUG.TFF in the same location as the html file.
I downloaded the font from the dafont.com website:
http://www.dafont.com/junebug.font
You can use #font-face in most modern browsers.
Here's some articles on how it works:
http://webdesignerwall.com/general/font-face-solutions-suggestions
http://webdesignerwall.com/tutorials/css3-font-face-design-guide
Here is a good syntax for adding the font to your app:
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
Here are a couple of places to convert fonts for use with #font-face:
http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/
http://www.font2web.com/
Also cufon will work if you don't want to use font-face, and it has good documentation on the web site:
http://cufon.shoqolate.com/generate/
For the best possible browser support, your CSS code should look 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 */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For more info, see the article Using #font-face at CSS-tricks.com.
Try this
#font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
}
<div class="FontMarket">KhonKaen Market</div>
vilis.org
If you are using an external style sheet, the code could look something like this:
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:
<link rel="stylesheet" href="css/styles.css">
in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the class="junebug" inside any tag in your html to use Junebug font in that element.
If you're putting the css in the actual web page, add the style tag in the head of the html like:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
And the actual element style can either be included in the above <style> and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
and
<h1 class="junebug">This is Junebug</h1>
And the least acceptable way would be:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
and
<h1 style="font-family: Junebug;">This is Junebug</h1>
The reason it's not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.
there is a simple way to do this:
in the html file add:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Note: you put the name of .ttf file you have.
then go to to your css file and add:
h1 {
color: blue;
font-family: vermin vibes;
}
Note: you put the font family name of the font you have.
Note: do not write the font-family name as your font.ttf name
example: if your font.ttf name is: "vermin_vibes.ttf" your font-family will be: "vermin vibes" font family doesn't contain special chars as "-,_"...etc it only can contain spaces.