www.webdeveloper.com
Results 1 to 7 of 7

Thread: Force Font

  1. #1
    Join Date
    Jul 2006
    Posts
    655

    Force Font

    Hi, there is a specific font that i have used in a certain section of my website design. I know that this font will NOT be on 99.9% of my users computers... so is there a way to apply this font to certain text, without having to use images for the text...

    If you can suggest away, can you confirm that it is compatible across all browsers...

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    a good idea is to use embeded (eot) fonts, there are also some API's available for embeding fonts using css, most popular is Google Web Fonts http://www.google.com/webfonts

  3. #3
    Join Date
    Jul 2006
    Posts
    655
    Hi, thanks... is this the same as @font-face or can you explain it a little better, thanks...

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    @font-face doesn't work across all browsers. The Google Webfont API will. It uses font-face when it can, but also includes JavaScript to work with older browsers.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    Quote Originally Posted by cbVision View Post
    @font-face doesn't work across all browsers. The Google Webfont API will. It uses font-face when it can, but also includes JavaScript to work with older browsers.
    Sure it does.

    All you need is all the proper files (eot, svg, ttf or otf and woff) and you've got support in everything even back to IE6.

    You can easily get all the files by starting with one ttf or otf and uploading it to the converter on fontsquirrel.com and using the bulletproof font-face syntax on fontspring.com.

    Also, your statement doesn't really make sense because the Google Webfont API uses @font-face.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  6. #6
    Join Date
    Sep 2012
    Posts
    5
    i think the solution is Google Web Fonts http://www.google.com/webfonts, yes you can use it but if the font is not available you can use @font-face, and if you want to support to any browser you must change the format to eot, svg, ttf or otf and woff, examples :

    @font-face {
    font-family: 'hollaregular';
    src: url('includes/font/hollascript-webfont.eot');
    src: url('includes/font/hollascript-webfont.eot?#iefix') format('embedded-opentype'),
    url('includes/font/hollascript-webfont.woff') format('woff'),
    url('includes/font/hollascript-webfont.ttf') format('truetype'),
    url('includes/font/hollascript-webfont.svg#hollaregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    you can export the font in http://www.fontsquirrel.com/fontface/generator , so you have the all format .

  7. #7
    Join Date
    Mar 2009
    Posts
    452
    personally i will prefer the following, as it reduces the http request to google api, thus faster loading,
    @font-face {
    font-family: 'hollaregular';
    src: url('includes/font/hollascript-webfont.eot');
    src: url('includes/font/hollascript-webfont.eot?#iefix') format('embedded-opentype'),
    url('includes/font/hollascript-webfont.woff') format('woff'),
    url('includes/font/hollascript-webfont.ttf') format('truetype'),
    url('includes/font/hollascript-webfont.svg#hollaregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles