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');
}
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 currently trying to import a font with the #font-face CSS element, but it is not working/ showing up. It is the font Francaise from Dafont.com, it is in the css folder with the stylesheet, but will not change my header font to desired font.
I have already tried searching Stack for similar queries, but each attempt is in vain.
#font-face {
font-family: 'Francaise';
src: local('Francaise Regular Demo.ttf') format('truetype');
}
I have anticipated my header text to be the aforementioned font, but it only shows up as the fallback font, cursive Comic Sans.
You have to use #font-face url without adding white space. Just rename your font and try the following structure.
#font-face {
font-family: 'Francaise';
font-style: normal;
font-weight: 400;
src: url('francaise-regular-demo.ttf'); /* IE9 Compat Modes */
src: local('Francaise Regular Demo'), local('Francaise Regular Demo'),
url('francaise-regular-demo.ttf') format('truetype');
}
Use the font-family: 'Francaise'; in your css.
first check the
Browser Support for Font Formats
use src for font
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
you can refer the site
http://fontsforweb.com/index.php
I've tried to setup "Sans Forgetica Regular" font to be the used font for entire a webpage after installing the font on my desktop of cource, however, it didn't work!
Does there a way to make it work please?
<body style="font-family:'Sans Forgetica Regular'">Hello</body>
Or
<body style="font-family:'SansForgetica-Regular'">Hello</body>
You declare it in the CSS like this:
#font-face {font-family: Sans Forgetica Regular; src: url('Sans-Forgetica-Regular.otf'); }
Then try it:
<body style="font-family:'Sans Forgetica Regular'">Hello</body>
You need to use the #font-face rule:
In this example, the user's local copy of "Sans Forgetica Regular" is
used; if the user does not have that font installed (two different
names are tried), then the downloadable font named
"SansForgetica-Regular.woff" is used instead:
CSS
#font-face {
font-family: 'Sans Forgetica Regular';
src: local('Sans Forgetica Regular'),
local('Sans-Forgetica-Regular'),
url('SansForgetica-Regular.woff') format('woff');
}
body {
font-family: 'Sans Forgetica Regular';
}
HTML (Avoid using inline style)
<body>
...
</body>
To my knowledge to use a custom font, stored locally in this case, you would use something similar to this.
#font-face {
font-family: 'theFontFamily';
src local('the font'),
local('the-font'),
url(path/to/the-font);
}
.fontClass {
font-family: 'theFontFamily', extra_settings;
}
So using this font, locally, would you expect this to work?
#font-face {
font-family: 'Pacifico';
src: local('Pacifico Regular'),
local('Pacifico-Regular'),
url(resources/fonts/Pacifico.ttf);
}
.logo-container {
font-family: 'Pacifico', cursive;
}
As when I try it, the code changes the font, just not to the desired font. It looks like this.
Whereas if I use the import link, <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">, just using the following code works.
.logo-container {
font-family: 'Pacifico', cursive;
}
This looks like this.
I have probably made a simple mistake and I would appreciate if someone would be able to aid me in fixing this.
Make sure you link the source url properly. Try
#font-face {
font-family: 'myPacifico' ;
src: url('/resources/fonts/Placifico.ttf') format('truetype');
}
That's basic enough, then to use...
.logo-container {
font-family: 'myPacifico', san-serif; }
San-serif in this case is a fallback. In this case, ive linked to the regular ttf file. For bold and other styles, u'ld have to link to that in another #font-face with a different name.
Perhaps this will work (tricky to say for sure without being able to test 100%):
#font-face {
font-family: 'Pacifico';
src: url('Pacifico-Regular.eot');
src: url('Pacifico-Regular.eot?#iefix')
url('Pacifico-Regular.woff2') format('woff2'),
url('Pacifico-Regular.woff') format('woff'),
url('Pacifico-Regular.ttf') format('truetype'),
url('Pacifico-Regular.svg#svgFontName') format('svg');
}
To just use the TrueType font locally:
#font-face {
font-family: 'Pacifico';
src: url('Pacifico-Regular.ttf');
}
Bear in mind you should have more than just the TrueType font for the highest level of browser compatibility, but for testing with just TTF you can delete any lines not referring to the TTF version.
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.