SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Where can i download custom fonts for Adobe and use it in CSS

    Just as the title says where can i download fonts like Sans-serif, georgia, helvetica and etc to use for my prototyping and web design

  2. #2
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well if it's for viewing non web safe fonts in the browser you can use Adobe TypeKit: https://www.typekit.com/
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    where can i download fonts like ... georgia, helvetica
    Don't most computers have them installed in their system by default anyway? There are many free fonts available at FontSquirrel that are ready for use on the web via @font-face.

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,276
    Mentioned
    119 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Don't most computers have them installed in their system by default anyway? There are many free fonts available at FontSquirrel that are ready for use on the web via @font-face.
    Georgia, yes. Helvetica, no - that's a mac font which isn't installed on Windows by default.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for links guys, i appreciate the resources for the fonts.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    Helvetica, no
    Be darned. So are all those people who complain about Helvetic Mac users?

    I'm sure there are plenty of free look-alikes that are free and ready for web usage.

  7. #7
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can find your choice at fontyukle and 1001freefonts.
    Hope these two site will work for you ....

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Emma Johnson View Post
    you can find your choice at fontyukle and 1001freefonts.
    Hope these two site will work for you ....
    As long as it's FREE :3

  9. #9
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Dafont.com has an amazing free font collection. There you can find any font you will ever need for your designs.

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When using custom fonts. Do i need to install it or just use @font-face in order to apply the custom fonts. For example Quicksand.otf

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    Do i need to install it or just use @font-face in order to apply the custom fonts. For example Quicksand.otf
    You need to put the fonts in a folder somewhere on your server and reference them via CSS. @font-face is useful for when you are using a font that most users are not likely to have on their system. If you don't actually provide the font file, @font-face will be useless, as the font it references won't be available.

  12. #12
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the fast response

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to convert otf fonts to ttf? I have found out that google chrome does not support extensions .otf

  14. #14
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't seem to apply to font i like to google chrome. Here is the code

    @font-face {
    font-family: Quicksand_Light;
    src: url(font/'Quicksand_Light.otf');
    font-family: Quicksand_Book;
    src: url(font/'Quicksand_Book.ttf');
    }

    It is working fine on mozilla but not on google chrome

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The best thing to do is go here:

    http://www.fontsquirrel.com/fonts/Quicksand

    and click the blue "Download @font-face Kit" button. That will give you all the files and CSS you need. You need various versions of the font for it to work in each browser, and they all come in that font kit, along with the CSS you need. It couldn't be easier.

  16. #16
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that method but the font won't apply in google chrome hmmm

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    I tried that method but the font won't apply in google chrome hmmm
    In the download folder, open their demo.html page. It works fine for me in Chrome.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    I tried that method but the font won't apply in google chrome hmmm
    In the download folder, open their demo.html page. It works fine for me in Chrome.

  19. #19
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then their is something wrong with my coding. I have placed the fonts in the "font" folder hmmm

  20. #20
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't seem to find the error in my website. I have placed the fonts in the root and i still can get it to work. Not sure what i'm missing T_T

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    So the demo page worked?

    Either show us a link, or describe what you are doing.

  22. #22
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes the demo page worked, but when i try to apply it in my web page it doesn't work. I haven't uploaded my work in a hosting site. Here is the code i placed in my style.css. The font is placed in a "fonts" folder.

    @font-face {
    font-family: QuicksandLight;
    src: url(fonts/'Quicksand_Light.otf');
    }

  23. #23
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have finally solved my problem regarding the fonts. I just simply took the "style.css" in the css folder and placed in the root. Which is weird and i don't know why it has to be liked that in order for the custom fonts to take effect. Would appreciate if some can explain it to me.

    All along i thought it was some error in the styling. What a pain!

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    i don't know why it has to be liked that in order for the custom fonts to take effect.
    When you use this in your style sheet:

    Code:
    url(fonts/'Quicksand_Light.otf')
    it is saying, find a folder inside this folder called /fonts/. If your /fonts/ folder is not in the folder where your CSS file is located, then of course the path won't work. So what you needed to do was edit that file path.

    Say you had the /CSS/ folder in the same folder as the /fonts/ folder. Then the path would be

    Code:
    url(../fonts/'Quicksand_Light.otf')

  25. #25
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see i assumed that putting just url('font/Quicksand_Light.otf') would locate the file. Didn't know it has to be liked that in order for it to work


Tags for this Thread

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
  •