Implementing "Sans Forgetica Regular" font in my webpage - html

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>

Related

Issue importing font via CSS

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

How to use a font in html/css

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');
}

Using a ttf file in css

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.

#font-face Is Not Working Properly

I am using the Open Sans font from Google fonts in my application using this import rule:
http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
When testing locally and I have no internet connection, the font no longer works.
What I have tried:
I have downloaded this font and set it up inside of my CSS file for #font-face,
but it shows all characters are different.
To fix your issue.
1.You first have to download the .ttf file from google fonts.
2.Put that file in your project and then add following to your css.
3.In url, specify the path of your .ttf file.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('your link to .ttf file') format('woff2');
}
use below code to import Google Web Font in CSS file.
#import url('http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22');
1st put this inside your head tag
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22' rel='stylesheet' type='text/css' />
All you need to do is add the font name to your CSS styles. For example:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }

How do I use .woff fonts for my website?

Where do you place fonts so that CSS can access them?
I am using non-standard fonts for the browser in a .woff file. Let's say its 'awesome-font' stored in a file 'awesome-font.woff'.
After generation of WOFF files, you have to define font-family, which can be used later in all your css styles. Below is the code to define font families (for normal, bold, bold-italic, italic) typefaces. It is assumed, that there are 4 *.WOFF files (for mentioned typefaces), placed in fonts subdirectory.
In CSS code:
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font.woff") format('woff');
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-bold.woff") format('woff');
font-weight: bold;
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-boldoblique.woff") format('woff');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-oblique.woff") format('woff');
font-style: italic;
}
After having that definitions, you can just write, for example,
In HTML code:
<div class="mydiv">
<b>this will be written with awesome-font-bold.woff</b>
<br/>
<b><i>this will be written with awesome-font-boldoblique.woff</i></b>
<br/>
<i>this will be written with awesome-font-oblique.woff</i>
<br/>
this will be written with awesome-font.woff
</div>
In CSS code:
.mydiv {
font-family: myfont
}
The good tool for generation WOFF files, which can be included in CSS stylesheets is located here. Not all WOFF files work correctly under latest Firefox versions, and this generator produces 'correct' fonts.
You need to declare #font-face like this in your stylesheet
#font-face {
font-family: 'Awesome-Font';
font-style: normal;
font-weight: 400;
src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}
Now if you want to apply this font to a paragraph simply use it like this..
p {
font-family: 'Awesome-Font', Arial;
}
More Reference