How to embed google font to joomla 3.0

Locked
wannlong
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sat Apr 23, 2011 8:08 am

How to embed google font to joomla 3.0

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

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

User avatar
ionut
Joomla! Ace
Joomla! Ace
Posts: 1264
Joined: Thu May 27, 2010 1:00 pm
Location: EU

Re: How to embed google font to joomla 3.0

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Sat Dec 15, 2012 12:23 pm

Re: How to embed google font to joomla 3.0

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?

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 36145
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to embed google font to joomla 3.0

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.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein

AlanCast
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Sat Dec 15, 2012 12:23 pm

Re: How to embed google font to joomla 3.0

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

:) Aha, understood.

Caplu
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri May 17, 2013 12:06 pm

Re: How to embed google font to joomla 3.0

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Fri Feb 25, 2011 1:13 am

Re: How to embed google font to joomla 3.0

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
I've been banned!
Posts: 27
Joined: Sat Apr 13, 2013 5:49 am

Re: How to embed google font to joomla 3.0

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?


Locked

Return to “Khmer Forum”