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"
}
Related
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
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 have also tried the .ttf version of this font without any results. For some reason the font is not showing up. The url to the font is correct.
#font-face {
font-family: EagleLake; /*a name to be used later*/
src: url('EagleLake.otf'); /*URL to font*/
}
h1{
font-family: EagleLake;
}
Try this format instead, it definitely works:
#font-face {
font-family: EagleLake;
src: url(EagleLake.otf);
}
Your h1 style attribution should then be of font EagleLake.
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;
this is my stylesheet for web font
#font-face {
font-family: 'bebas_neueregular';
src: url('bebasneue-webfont.eot');
src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
url('bebasneue-webfont.woff') format('woff'),
url('bebasneue-webfont.ttf') format('truetype'),
url('bebasneue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
and me use that font like this
.men_tp{
color: #d1d3d5;
float: left;
font-family:"bebas_neueregular",Arial;
font-size:22px;
}
its working fine in my machine because i have those fonts but that font not applying for other hosts even i placed those font src in same area were i placed that CSS file.Help me Guys.
Try changing your CSS line to the following:
.men_tp {
color: #d1d3d5;
float: left;
font-family: bebas_neueregular, Arial;
font-size:22px;
}
(The line breaks have only been inserted to make it easier to read on this page.)
You've declared the new font as having name "bebas-neueregular" in your #font-face block, so you need to use that in your CSS declaration for the .men_tp style.