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



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 ;)


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):
<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:
@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 :)


Well-known member
I went to page_container and added

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


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 ;)