I am new to web design and development and have been playing around with different styling techniques. During the course of my research, I came across icon fonts. Though I have investigated a number of tutorials and videos, I have been unable to successfully make use of icon fonts despite many hours of effort.
To start, I went to a site that offers a large number of icon fonts, chose the ones I liked, generated them and finally downloaded them into a folder. But now that these icon fonts are in a folder, what should I do?
Here is a step by step guide:
Go to Font Squirrel and download the #font-face kit. Unzip it, rename it to 'fonts', and put it in the same directory as your html file.
Use this as your html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#font-face {
font-family: 'ModernPictogramsNormal';
src: url('fonts/modernpics-webfont.eot');
src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/modernpics-webfont.woff') format('woff'),
url('fonts/modernpics-webfont.ttf') format('truetype'),
url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}
li {
list-style-type: none;
}
[data-icon]:before {
font-family: 'ModernPictogramsNormal';
content: attr(data-icon);
speak: none;
padding:0 5px;
}
</style>
</head>
<body>
<ul>
<li data-icon="^">RSS</li>
<li data-icon="*">Star</li>
<li data-icon=".">Shopping Cart</li>
</ul>
</body>
</html>
You should see this:
You're rolling!
In addition, to know what character to use, check out the Character Map on the Font Squirrel site.
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.
The main problem was that the font was displayed differently than it should, although everything was connected correctly.
I managed to find the source in html and css where it is shown how to use this font and it began to appear as it should.
The only suggestion as to why the font did not work is that this font in ttf format does not work on the web.
Thank u everyone for the help!
/* #### Generated By: http://www.cufonfonts.com #### */
#font-face {
font-family: 'Voya Nui';
font-style: normal;
font-weight: normal;
src: local('Voya Nui'), url('VoyaNui_1.15_4.woff') format('woff');
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="font-family:'Voya Nui';font-weight:normal;font-size:65px">018.0204 BIOLOGICAL CHRONICLE</h1>
</body>
</html>
You can't do <link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf">.
You need to use #font-face in css or style.
#font-face {
font-family: 'VoyaNui';
src: url('./fonts/VoyaNui_1.15_4') format('woff2'),
url('./fonts/VoyaNui_1.15_4') format('woff'),
url('./fonts/VoyaNui_1.15_4') format('ttf');
}
One more thing, I use woff and woff2, because it has a good compression, but be careful with some browsers (IE).
See in caniuse https://caniuse.com/#search=woff and https://caniuse.com/#search=woff2
Assuming your pasted stylesheet is styles.css, add the font-face definition before your body rule:
#font-face {
font-family: 'VoyaNui',
src: url('fonts/VoyaNui_1.15_4.ttf');
}
body {
font-family: 'VoyaNui';
}
Then remove the <link> to the font, it will not work.
You need to generate the fonts from online web font generator and after the generation of fonts put the woff and woff2 generated fonts in your fonts folder.
#font-face {
font-family: 'VoyaNui';
src: url(./fonts/VoyaNui_1.15_4) format('ttf'), url(./fonts/VoyaNui_1.15_4) format('woff'), url(./fonts/VoyaNui_1.15_4) format('woff2');
}
I am making a simple website for someone and I want to include some custom fonts in it, namely Open Sans Condensed Light/Bold.
The font does load. But not on the first load of the page. You have to click on one of the links on the page to make the custom fonts load, or have to have visited the website and done that before.
This is obviously a problem as first time visitors will be confronted with an ugly looking website. When inspecting the not-working website in firebug, the font-family css part has a greyed out name, meaning it was not activated for some reason.
I use the following code in my CSS:
#font-face {
font-family: 'OpenBold';
src: url('opensans-condbold-webfont.eot');
src: url('opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-condbold-webfont.woff2') format('woff2'),
url('opensans-condbold-webfont.woff') format('woff'),
url('opensans-condbold-webfont.ttf') format('truetype'),
url('opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSansLight';
src: url('opensans-condlight-webfont.eot');
src: url('opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-condlight-webfont.woff2') format('woff2'),
url('opensans-condlight-webfont.woff') format('woff'),
url('opensans-condlight-webfont.ttf') format('truetype'),
url('opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg');
font-weight: normal;
font-style: normal;
}
body, html{
font-family:"OpenSansLight";
margin:0;
padding:0;
background-image:url(../images/sintbg1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
I do include my Stylesheet. My <head> looks like
<meta charset="utf-8">
<title>Sinterklaas <? echo $titel?></title>
<base href="http://www.mywebsite.info">
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
Anyone have any idea what I can change to make this work? Maybe something I overlooked? I've been struggling with this for almost a week now.
I found the answer to my problem.
It had to do with my base href.
It used to be the href to my website. Changing it to:
<base href="http://<? echo $_SERVER['HTTP_HOST']; ?>" />
Solved my problem. Turns out the fonts only load when "www" is placed in front of the href or something.
Anyway, I hope this helps someone! I had been looking for the answer for weeks.
Trying to use in a span the font saved locally but no results.
This is my code:
#font-face {
font-family: 'pacifico';
src: local(C:\Users\ProBook\Dropbox\work\WEBDESIGN\bartCRM\site\pacifico\pacifico.eot) format('eot');
src: local(C:\Users\ProBook\Dropbox\work\WEBDESIGN\bartCRM\site\pacifico\pacifico.woff) format('woff'),
local(C:\Users\ProBook\Dropbox\work\WEBDESIGN\bartCRM\site\pacifico\pacifico.ttf) format('truetype'),
local(C:\Users\ProBook\Dropbox\work\WEBDESIGN\bartCRM\site\pacifico\pacifico.svg) format('svg');
}
span {
font-family: 'Pacifico', Courier;
font-size: 1.5em;
}
and HTML:
<div id="text">
<span>a sentence</span>
Any ideas on how to make Pacifico font appear?
If you want to use this font, but from your machine (doesn't matter if server or just a local PC), just paste this link to browser:
http://fonts.googleapis.com/css?family=Pacifico
and copy the code. After this, change a path to this font from
http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff
to
fonts/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff
or wherever you want to keep font file.
Just add <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> to your header.
DEMO
Hope that helps!
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.