Tutorials Themes Mods Inspiration Collections Theme Store Mod Store SMF HTML CSS geek Dani UX jane Lifestyle LimeStone

Using Google Font API

Written by Mick in Tutorials on 18 Jun 2012


This guide explains how to use the Google Web Fonts API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

In Themes/YOUR_THEME/index.template.php

Find:
</head>

Add before:
<link href="http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo" rel="stylesheet" type="text/css">

In css/index.css

Find:
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;

Replace with:
font: 78%/130% "Swanky and Moo Moo", cursive;

Demo: Google Font API

Ther are hundreds of fonts available. Choose the one that suits you best.  Google Web Fonts
Mick

is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.


14 Comments

man I said that before, you are awesome :)

I was searching on sm.org yesterday on a way to use a different fonts for the forum. I saw on a theme the creator used a different method. I don't know the procedures but I noticed a change in index.css, a code in index.template.php and a font file with the theme.

anyways I think this is more convenient. wish me luck in finding arabic fonts.

thanks again BD
#1
by the way,

what if I want to use more than one font. like if I want to use a font for tittle, another one for linktree, a different to topics tittle, then a fourth one for postarea?


#2
For multiple fonts read this: https://developers.google.com/webfonts/docs/getting_started

... And for different places in the forum, well that's easy. Just replace the default font in the CSS file with your custom one.
#3
Thanks,

I had no luck finding an arabic font apply to this case. I guess I have to just use it to change the english one.


thanks again
#4
Quote from: BaghdadGhost on 03 Jul 2012
Thanks,

I had no luck finding an arabic font apply to this case. I guess I have to just use it to change the english one.


thanks again
I would imagine google has an extensive Arabic list?
#5
I am now using "Oswald" font here on idesign360  ;)


font: 85%/130% "Oswald", sans-serif;
#6
This is really great. I've tried it and is now using the Oxygen font from Google. :) Thanks Mick!

BTW, where can I edit the font for the SMF copyright? It's the only one left that's using the Arial font. :)
#7
Quote from: JoliePittOnline on 21 Jan 2013
This is really great. I've tried it and is now using the Oxygen font from Google. :) Thanks Mick!

BTW, where can I edit the font for the SMF copyright? It's the only one left that's using the Arial font. :)
Assuming youre using the Blues theme?

find:
#footer {
add the font after..

font:  "whatever", whatever;
#8
Try it in here instead...
#footer ul li a {
font-size: 10px;
}
#11
Quote from: Mick on 21 Jan 2013
Try it in here instead...
#footer ul li a {
font-size: 10px;
}



Yup. That did that trick! Thanks Mick!  ;D
#12
Quote from: JoliePittOnline on 21 Jan 2013

Yup. That did that trick! Thanks Mick!  ;D
Awesome.  :P
#13
Got an email today regarding what font was used on our logo. Well, it's not a photoshopped logo. It's plain text from google font API called "Qwigley".

Enjoy.
#14

Get more stuff like this