How to Using custom fonts in CSS
I Want to display Spacial font on my website .. so that i want to use extra (other then arial , Tahome ) spacial font in CSS (Cascading Style Sheets) . plaease help me ......
CSS
- asked 9 years ago
- Gul Hafiz
2Answer
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.com/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.
I hope that helped!
- answered 8 years ago
- B Butts
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
- answered 8 years ago
- B Butts
Your Answer