1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fonts

Discussion in 'Styling and Customization Questions' started by Matthew2D, Jun 1, 2012.

  1. Matthew2D

    Matthew2D Active Member

  2. Sylar

    Sylar Well-Known Member

    @font-face is really helpful ;)
    All you would have to do is upload the fonts to a /fonts folder, and then link them properly in the css, then you would use them normally.
    Or you could use google fonts, and then just link them that way ;)
     
  3. Matthew2D

    Matthew2D Active Member

    How do I link to them? Is it the same way as, <a href="blah">blah</a>?
     
  4. Sylar

    Sylar Well-Known Member

    A bit more info:
    If you wanted to use a webfont from google, you would go to http://www.google.com/webfonts
    Choose a font, for instance: Black Ops One. I chose that font. Here's how you would link it(in the <head></head> section):
    HTML:
    <link href='http://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
    Just browse fonts on there and then you can link them like that. Also, if you wanted to do it via CSS, there's the @import feature:
    Code:
    @import url(http://fonts.googleapis.com/css?family=Black+Ops+One);
    That's another option.

    As for fonts that you have, I would say check out http://www.fontsquirrel.com/. They have some really good @font-face kits for you to experiment with, and that's where I would start learning stuff about @font-face. Also, there's the official website: http://www.font-face.com/

    Hope that helps :)
     
  5. Matthew2D

    Matthew2D Active Member

    I went to page_container and added

    Code:
    <link href='http://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
    After <head> and it didn't work.
     
  6. Sylar

    Sylar Well-Known Member

    Did you add it to the css for usage?
     
  7. Matthew2D

    Matthew2D Active Member

  8. Sylar

    Sylar Well-Known Member

    If you use @import url, it's one line of code itself in the css file. Then, just add this to the css:
    font-family: 'Black Ops One', cursive;
    @import url is it's own single thing lol, can't use it within something ;)
    If you use a google webfont you need to read about it, checking the implementation and the usage ;)
     
  9. MagnusB

    MagnusB Well-Known Member

Share This Page