How to embed google font to joomla 3.0

wannlong · Post by **wannlong** » Wed Mar 20, 2013 2:07 pm

Hi
Could you tell me how to embed google font to Joomla 3.0?

ionut · Post by **ionut** » Wed Mar 20, 2013 2:50 pm

You could add the link provided by Google directly into your template if you want to use the font all over your website.

For example if you are using protostar template, go to Extensions - Template manager - click on the name of the template, in our case protostar (under the "Template" column, not "Style" ), and Edit Main Page template.
You can add the code ( <link href='http://fonts.googleapis.com/css?family=xxxxx' rel='stylesheet' type='text/css'> ) right above </head> tag. Save and that's all.

I've made a little video to show you how to do it: http://www.[youtube].com/watch?v=ae2cb_Uab_o

AlanCast · Post by **AlanCast** » Thu Mar 21, 2013 2:43 am

It seems that there is some parameter built-in already (Joomla 3.0.3), see index.php of Protostar:

Code: Select all

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<jdoc:include type="head" />
	<?php
	// Use of Google Font
	if ($this->params->get('googleFont'))
	{
	?>
		<link href='http://fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
		<style type="text/css">
			h1,h2,h3,h4,h5,h6,.site-title{
				font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
			}
		</style>
	<?php
	}
	?>

But where can I set this parameter?

Webdongle · Post by **Webdongle** » Thu Mar 21, 2013 2:54 am

There is an option in the Template style options to use one Google font for headings. But if you want to create css that has reference to a different Google font than the main one you use ... then the method suggested by ionut[beesto] should work.

AlanCast · Post by **AlanCast** » Thu Mar 21, 2013 3:25 am

Aha, understood.

Caplu · Post by **Caplu** » Mon Jun 10, 2013 8:25 pm

Is it also possible to embed a google font for seperate menu sections, like the menu title and the headings of articles in a blog and the modules?

I want to integrate this font: font-family: 'Dawning of a New Day', cursive;

<link href='http://fonts.googleapis.com/css?family= ... +a+New+Day' rel='stylesheet' type='text/css'>

byman64 · Post by **byman64** » Wed Apr 30, 2014 9:45 pm

Hi,

Some days ago I had a similar issue: how to use google font for body tag.

Protostar Template has only a field to set the heading tags (h1, h2, h3...).

I solved myself and I wrote an article, let me share it with the community.

I hope someone will save time with it.

http://www.byman.it/x/protostar-font

ciao

- have fun -

rutin · Post by **rutin** » Sat Aug 16, 2014 1:56 pm

Is there any way to embed a Google Web Font script in an SVG file?

The Joomla! Forum™

How to embed google font to joomla 3.0

How to embed google font to joomla 3.0

Re: How to embed google font to joomla 3.0

Re: How to embed google font to joomla 3.0

Re: How to embed google font to joomla 3.0

Re: How to embed google font to joomla 3.0

Re: How to embed google font to joomla 3.0

Re: How to embed google font to joomla 3.0

Re: How to embed google font to joomla 3.0