How to include a font .ttf using CSS?
Only providing .ttf file for webfont won't be good enough for cross-browser support. The best possible combination at present is using the combination as :
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
This code assumes you have .eot , .woff , .ttf and svg format for you webfont. To automate all this process , you can use : Transfonter.org.
Also , modern browsers are shifting towards .woff font , so you can probably do this too :
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
Read more here : http://css-tricks.com/snippets/css/using-font-face/
Look for browser support : Can I Use fontface
Using a custom (ttf) font in CSS
You need to use the css-property font-face to declare your font. Have a look at this fancy site: http://www.font-face.com/
Example:
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
See also: MDN @font-face
CSS use custom font (ttf) from folder
You don't need the entire filepath. Since its in the same folder, simply use url('zz/fontname.ttf)
Or if the ttf file is in the same directory as the index.html file, then drop the 'zz'
Using custom fonts using CSS?
Generically, you can use a custom font using @font-face
in your CSS. Here's a very basic example:
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname
is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face
rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
Using a ttf file in css
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.
To use local font in HTML using font face
I made the following changes and I got the result
- Quotation marks for font-family
- Using of URL instead of local
- Changing of "\" to "/"
Note:
Use of the local
css function throws an error in the developer console saying resource is not loaded. See the modified code below.
<!DOCTYPE html><html><head><style>@font-face { font-family: "myFirstFont"; src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");}
.harlow { font-family: "myFirstFont";}</style></head><body><div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div><p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p></body></html>
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
Using custom @font-face in CSS is not working in any browser
It turns out that I was using the "Files\Fonts\" as the path of the font, although since it was the css file I was using, it was already in the "Files" folder so I just needed it to change to "Fonts\KeepCalm.tff". Stupid mistake but it's easy to miss.
Adding custom fonts in CSS
Keep fonts in /fonts folder, this will help with clean structure of site down the line. Remember - everything what's in the file is relative to that file - meaning, if you'd put these fonts in /css
folder - it would work.
If you want to go back in folder structure just use ../
. It's useful if you want to store images for example in /img
and not in /css/img
.
@font-face{
font-family: league_spartanregular;
src: url('../fonts/leaguespartan-bold-webfont.eot');
src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
font-weight: normal;
font-style: normal;
}
Related Topics
How Is the "Greater Than" or ">" Character Used in CSS
What Does This Symbol Mean in CSS
Why Is Filter(Drop-Shadow) Causing My Svg to Disappear in Safari
Change the Style of an Element If the Fragment Identifier (Hash) in the Url References It
How to Change Navbar Collapse Threshold Using Twitter Bootstrap-Responsive
Creating a Diagonal Line/Section/Border with CSS
Right to Left Support for Twitter Bootstrap 3
How to Vertically Align 2 Different Sizes of Text
How to Exclude the First Item in a Flexbox Wrap
CSS Selector for Not a Child of Element Type
Css: How to Change Colour of Active Navigation Page Menu
Disable CSS Animation on Pseudo Element Inherited from Parent
When to Use "!Important" to Save the Day (When Working with CSS)