E-Mark wrote:This will not work without installing the font on your website. You need to have the .ttf file of the font. Btw, is the font free?

Code:

            @font-face {
              font-family: cool_font;
              src: url('cool_font.ttf');
            }

Code:

            p.custom_font{
              font-family: cool_font; /* no .ttf */
            }

he say:
Like I told you, you need to use google fonts script for this... like so"

Code:

        WebFontConfig = {
                google: { families: [ 'Tangerine', 'Cantarell' ] }
              };
        (function() {
        var link_font = document.createElement('script');
        link_font.src=('https:' == document.location.protocol ? 'https' : 'http') +"://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
        link_font.type="text/javascript";
        link_font.async="true";
        link_font.id="google_fonts";
        var get_script= document.getElementById('google_fonts')[0];
        get_script.parentNode.insertBefore(link_font,get_script);
        }();

CSS

Code:

        .element{font-family:'tangerine',sans-serif}

This way will be easier as it won't be such a long cache request.

Code:

@font-face {
    font-family: SpyAgency;
    src: url('http://www.fontsaddict.com/download/spy-agency-condensed.ttf');
}
.secondarytitle, .secondarytitle h2 {
font-family: SpyAgency !important;
}

Code:

.secondarytitle, .secondarytitle h2 {
    color: #EEEEEE;
    text-align: left;
    font-family: Spy Agency;
    text-shadow: 0 -1px 0 #666;
    font-size: 11px;
    padding-left: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 5px;
    font-weight: normal;
}


well those are just fonts you can download your computer, there is a difference between computer fonts and webfonts. You have to remember you can assign any font in the font library, and if you don't have it on your computer it will not show up unless you have it on your personal computer. So that is where the google fonts come into play.

There are many additions to the WebFontConfig as you can see below that code we have

google: { families [""]}

We can also do the following

Code:

        WebFontConfig = { typekit: {
            id: 'myKitId'
          }
        };

or

Code:

        WebFontConfig ={
          ascender: {
            key: 'myAscenderKey',
            families: [ 'AscenderSans:bold,bolditalic,italic,regular' ]
          }
        };

or

Code:

        WebFontConfig ={
          monotype: {
            projectId: 'YourProjectId'
          }
        };

or

Code:


        WebFontConfig = {
          fontdeck: {
            id: 'xxxxx'
          }
        };

These are all providers -

The following can be found at

typekit: www.typekit.com
ascender: http://www.fontslive.com/
monotype: http://webfonts.fonts.com/
fontdeck: http://fontdeck.com/

the above you will have to sign up, create a deck and provide the information in the WebFontConfig via id or key. Hope this helps you and you get this working

Code:

@font-face {
    font-family: SpyAgency;
    src: url('http://static.tumblr.com/hhedat8/Nmjmmpt27/spyagencycond.ttf');
}
.secondarytitle, .secondarytitle h2 {
font-family: SpyAgency !important;
}