10

How do I incorporate multiple Google Fonts into my Joomla! site?

I'd like to maximize compatibility in all browsers.

Can multiple Google Fonts be incorporated through the admin panel?

What do I need to include in my CSS?

I'm also using JCE as the default content editor - how do I make the Google fonts appear in the drop-down and eliminate the other fonts? (i.e. to avoid authors selecting a font that is not in the style guide).

9

Let's say you want "Roboto" and "Open Sans" to be available for your authors in JCE font-family drop down.

First :
Find your fonts in google fonts and add to your editor CSS stylesheet the @import you get from them.
For this example, it looks like this :

@import url(http://fonts.googleapis.com/css?family=Roboto|Open+Sans);

Second :
To remove/add fonts in JCE you need to go to the Typography tab in the editor parameters. For joomla 3.2 the path is :

Component > JCE Editor > Editor Profiles > choose the profile you want to add/remove fonts from > Editor parameters >typography.

Scroll down to "Fonts" and you can start by unticking the fonts you want to remove.

Then you can add new fonts to the list by clicking on "add new font..." enter you font names, save and that's it.


Browser compatibility :
The google API is compatible for the following browsers :

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

Source

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.