Using custom fonts using CSS

Question

I ve seen some new websites that are using custom fonts on their sites  other than the regular Arial  Tahoma  etc     And they support a nice amount of browsers   How does one do that  While also preventing people from having free access to download the font  if possible

User · Answer

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.

User · Answer

First of all  you can t prevent people from downloading fonts except if it is yours and that usually takes months  And it makes no sense to prevent people from using fonts  A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below   But if you want to implement a font into your website read this  There is a pretty simple and free way to implement fonts into your website  I would recommend Google fonts because it is free and easy to use  For example  I ll use the Bangers font from Google  https   fonts google com specimen Bangers query bangers amp sidebar open amp selection family Bangers  This is how it would look like  HTML   lt head gt   lt link href  https   fonts googleapis com css2 family Bangers amp display swap  rel  stylesheet  gt   lt  head gt    CSS  body   font-family   Bangers   cursive

User · Answer

I am working on Win 8  use this code  It works for IE and FF  Opera  etc  What I understood are   woff font is light et common on Google fonts   Go here to convert your ttf font to woff before    font-face       font-family  Open Sans       src url  OpenSans-Regular woff

User · Answer

If you dont find any fonts that you like from Google com webfonts or fontsquirrel com you can always make your own web font with a font you made    here s a nice tutorial  Make your own font face web font kit  Although im not sure about preventing someone from downloading your font   Hope this helps

User · Answer

To make sure that your font is cross-browser compatible  make sure that you use this syntax    font-face       font-family   Comfortaa Regular       src  url  Comfortaa eot        src  local  Comfortaa Regular              local  Comfortaa              url  Comfortaa ttf   format  truetype             url  Comfortaa svg font   format  svg         Taken from here

User · Answer

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

User · Answer

there s also an interesting tool called CUFON  There s a demonstration of how to use it in this blog It s really simple and interesting  Also  it doesn t allow people to ctrl c ctrl v the generated content

User · Answer

Today there are four font container formats in use on the web  EOT  TTF  WOFF andWOFF2   Unfortunately  despite the wide range of choices  there isn t a single universal format that works across all old and new browsers     EOT is IE only  TTF has partial IE support  WOFF enjoys the widest support but is not available in some older browsers WOFF 2 0 support is a work in progress for many browsers      If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS    font-face         font-family   besom    important       src  url  fonts besom besom eot          src  url  fonts besom besom eot  iefix   format  embedded-opentype               url  fonts besom besom woff2   format  woff2               url  fonts besom besom woff   format  woff               url  fonts besom besom ttf   format  truetype               url  fonts besom besom svg besom 2regular   format  svg          font-weight  normal        font-style  normal

[css] Using custom fonts using CSS?

Examples related to css

Examples related to font-face