Google Fonts in SMF 2.0x - Help!

Destrogath · October 01, 2014, 11:23:30 PM

I cannot get the Google Fonts code to load within my theme's index.template. Every time I try I get a "template parse error!".

Google is telling me to use the following code within my <head> tag, <link href='http://fonts.googleapis.com/css?family=Cinzel'; rel='stylesheet' type='text/css'>

Any help would be greatly appreciated. I am even trying it with the default SMF 2.0 theme, no luck.

mashby · October 01, 2014, 11:25:31 PM

Turn your frown upside-down (as in use " instead of '):

Code Select

<link href="http://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet" type="text/css" />
Also, keep in mind that alone won't get you very far unless you've done additional work in your CSS files to use that CSS declaration.

Destrogath · October 01, 2014, 11:27:04 PM

Still getting a Template Parse Error. Is there anywhere specific I need to place it within the <head> tag?

mashby · October 01, 2014, 11:28:37 PM

How are you inserting that? A few lines of code above and below where you are inserting that would be helpful, if not, the entire index.template.php file as an attachment.

Destrogath · October 01, 2014, 11:33:03 PM

Here is my <head> tag within the index.template.php

Code Select

<head>';

	
	// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
	echo '
	<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

	// Some browsers need an extra stylesheet due to bugs/compatibility issues.
	foreach (array('ie7', 'ie6', 'webkit') as $cssfix)
		if ($context['browser']['is_' . $cssfix])
			echo '
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/', $cssfix, '.css" />';
		
	// RTL languages require an additional stylesheet.
	if ($context['right_to_left'])
		echo '
	<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

	// Here comes the JavaScript bits!
	echo '
	<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
	<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>
	<script type="text/javascript"><!-- // --><![CDATA[
		var smf_theme_url = "', $settings['theme_url'], '";
		var smf_default_theme_url = "', $settings['default_theme_url'], '";
		var smf_images_url = "', $settings['images_url'], '";
		var smf_scripturl = "', $scripturl, '";
		var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
		var smf_charset = "', $context['character_set'], '";', $context['show_pm_popup'] ? '
		var fPmPopup = function ()
		{
			if (confirm("' . $txt['show_personal_messages'] . '"))
				window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
		}
		addLoadEvent(fPmPopup);' : '', '
		var ajax_notification_text = "', $txt['ajax_in_progress'], '";
		var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
	// ]]></script>';

	echo '
	<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
	<meta name="description" content="', $context['page_title_html_safe'], '" />', !empty($context['meta_keywords']) ? '
	<meta name="keywords" content="' . $context['meta_keywords'] . '" />' : '', '
	<title>', $context['page_title_html_safe'], '</title>';

	// Please don't index these Mr Robot.
	if (!empty($context['robot_no_index']))
		echo '
	<meta name="robots" content="noindex" />';

	// Present a canonical url for search engines to prevent duplicate content in their indices.
	if (!empty($context['canonical_url']))
		echo '
	<link rel="canonical" href="', $context['canonical_url'], '" />';

	// Show all the relative links, such as help, search, contents, and the like.
	echo '
	<link rel="help" href="', $scripturl, '?action=help" />
	<link rel="search" href="', $scripturl, '?action=search" />
	<link rel="contents" href="', $scripturl, '" />';

	// If RSS feeds are enabled, advertise the presence of one.
	if (!empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']))
		echo '
	<link rel="alternate" type="application/rss+xml" title="', $context['forum_name_html_safe'], ' - ', $txt['rss'], '" href="', $scripturl, '?type=rss;action=.xml" />';

	// If we're viewing a topic, these should be the previous and next topics, respectively.
	if (!empty($context['current_topic']))
		echo '
	<link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />
	<link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';

	// If we're in a board, or a topic for that matter, the index will be the board's index.
	if (!empty($context['current_board']))
		echo '
	<link rel="index" href="', $scripturl, '?board=', $context['current_board'], '.0" />';

	// Output any remaining HTML headers. (from mods, maybe?)
	echo $context['html_headers'];

	echo '
	

	
</head>

mashby · October 01, 2014, 11:38:27 PM

And where in that block of code is there a reference to the Google-hosted font?

Destrogath · October 01, 2014, 11:39:19 PM

I was just showing you the head tag without the block of code for google. I've tried it in multiple places with no luck. Any suggestions on where I should put it?

http://www.google.com/fonts#UsePlace:use/Collection:Cinzel

The link on how google says to do it. I've used it in wordpress with no issues.

mashby · October 01, 2014, 11:41:28 PM

That is indeed the most likely proper place. But I have to ask this question. Just by referencing that one line of code doesn't mean it will be used in real-life. In another CSS file, are you using/referencing that font?

Destrogath · October 01, 2014, 11:46:17 PM

In my current theme, yes I am trying to use the "Cinzel" font. I've done this before with WordPress and it was a non issue. I'm not understanding why I am getting a template parse error after just putting in a line of code that allows you to call a google font via the CSS.

Kindred · October 02, 2014, 06:50:11 AM

And, please paste the code that you have AFTER you add your one line....
I am betting that you are either putting it in the wrong place or not using the code that ashby suggested.

News:

Google Fonts in SMF 2.0x - Help!