Kiki PRO and Google Fonts

Kiki Pro and Google Font 101

There have been a couple of people asking about how to bring Google fonts into Kiki Pro for use on the site title, slogan and other areas. This article attempts to explain one way to achieve this.

Lets say that we wish to apply a google font to the site title (in the navbar) and the slogan (embedded in the banner). See image below. A pretty typical requirement.

First - head over to the Google fonts repository and select the font you would like to use. Of course you can bring more than one font into the project, but for simplicity lets stick to a single font for now.

So, grab your embed code - which should look like this:-

Next paste that embed code/link into the RapidWeaver HEAD global code container:

This ensures that the font is made available for use on our pages.

Now all we need to do is add some custom CSS to style the site title and slogan with this font. So open the RW Global code container and select the CSS container. Into that container you can place the styling rules for the site title and the slogan as shown:-

The CSS is:-

/* This is the site title */
#title small {
  font-family: "Slackey";
}
/* This is the slogan */
h1.huge.text-center-md {
  font-family: "Slackey";
	}

In the example above we are styling both elements in one go. But you can just target one element or separately - whatever works for you. It goes without saying, but I'll say it anyway, that the name of the font used in the CSS needs to exactly match the name of the font you have chosen to use and is present in the embed code.

End result:-

 

And there you have it.. Google fonts in Kiki Pro. Easy!

Still need help? Contact Us Contact Us