How to add some non-standard font to a website?
This could be done via CSS:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).
How do I install a custom font on an HTML site
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
How do I add custom fonts?
download your font and put in any directory. here i added in fonts directory
<style>
@font-face {
font-family: 'maven_pro_light_300regular';
src: url('fonts/mavenprolight-300-webfont.eot');
src: url('fonts/mavenprolight-300-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/mavenprolight-300-webfont.ttf') format('truetype'),
url('fonts/mavenprolight-300-webfont.woff') format('woff'),
url('fonts/mavenprolight-300-webfont.svg#maven_pro_light_300regular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
and you can use it by follow example:
<style>
h2{
font-family:maven_pro_light_300regular;
}
</style>
Add a font to a website
Not all browser support .ttf. Use a font generator to get all the font types ( I use font2web ) and then just add the fonts via @font-face:
@font-face {
font-family: 'fontName';
src: url('../fonts/fontName.eot');
src: url('../fonts/fontName.eot?iefix') format('eot'),
url('../fonts/fontName.woff') format('woff'),
url('../fonts/fontName.ttf') format('truetype'),
url('../fonts/fontName.svg#fontName') format('svg');
font-weight: normal;
font-style: normal;
}
Read here about browser font support.
How to use a font installed in your computer, to a web site?
You need to create a font kit.
This site will do it for you: http://www.fontsquirrel.com/tools/webfont-generator
However, it will not let you use a copyrighted font. Not all the font files on your computer are authorized for web use, but you can buy the license from the creater (these typically have a high price tag).
Related Topics
Change All Variable Value Based on Body Class
Setting CSS Style Attributes with Thymeleaf
Multiple Background Images Using SASS/Compass
What Transition-Property to Use for Transform
Remove Unwanted Space with Position Sticky
How to Style the Default Wordpress Audio Player with CSS
CSS Inverted Trapezium When Width Will Differ
How to Style HTML5's Range Control
<Body> Background-Color Property Doesn't Work Correctly with HTML5 Doctype
Styling Placeholder on Firefox
How to Use Both Rel="Preload" and Rel="Stylesheet" for the Same Tag
Purgecss Whitelist Patterns with Tailwindcss
Why Does Bootstrap Use '!Important' for Responsive Classes
Bootstrap Ie Background Color Issue
How to Make CSS Max Width in IE6 and 7
How to Make a Scrollable Element Fill 100% of the Remaining Height of a Parent Element