SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Query about unusual fonts on modern sites

    Hi,

    Often these days you see websites with really interesting fonts on them. When you dig into the html / css, the fonts come out like e.g.:

    Code CSS:
    #projects h2 {
    color: #5D2728;
    font: normal 24px/30px "MinionPro", serif;
    text-transform: uppercase;
    }

    or

    Code CSS:
    #projects h1 {
    color: white;
    font: normal 75px "DINSchrift", sans-serif;
    letter-spacing: 7px;
    margin: 0 0 25px 0;
    padding: 0 0 0 7px;
    text-transform: uppercase;
    }

    Above are from:
    My Name is Jarad Johnson

    How can they make their fonts look so good, when I don't have those fonts on my PC?

    Is there a trick I'm missing - probably!

    Thanks

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This are webfonts, the enable you to use any font on your site. So we are no longer limited to the "safe" fonts

    google webfonts

    or visit:
    Google Web Fonts

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! They look amazing - thanks for your reply.

  4. #4
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... just out of interest, I can't find any trace of the google fonts API on the jared site - is that still how he's doing it?

  5. #5
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just found it:
    http://www.jaradjohnson.com/media/styles/global.css

    Code CSS:
    @font-face {
    	font-family: 'MinionPro';
    	src: url('../fonts/minionpro-boldcn-webfont.eot');
    	src: local('☺'), url('../fonts/minionpro-boldcn-webfont.woff') format('woff'), url('../fonts/minionpro-boldcn-webfont.ttf') format('truetype'), url('../fonts/minionpro-boldcn-webfont.svg#webfonti50AtNAS') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'BlackJack';
    	src: url('../fonts/black_jack-webfont.eot');
    	src: local('☺'), url('../fonts/black_jack-webfont.woff') format('woff'), url('../fonts/black_jack-webfont.ttf') format('truetype'), url('../fonts/black_jack-webfont.svg#webfontfooJoIoN') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'DINSchrift';
    	src: url('../fonts/din_30640_neuzeit_grotesk_bold_condensed-webfont.eot');
    	src: local('☺'), url('../fonts/din_30640_neuzeit_grotesk_bold_condensed-webfont.woff') format('woff'), url('../fonts/din_30640_neuzeit_grotesk_bold_condensed-webfont.ttf') format('truetype'), url('../fonts/din_30640_neuzeit_grotesk_bold_condensed-webfont.svg#webfontEaGB2wlZ') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •