Shape 5

General Category => Joomla Talk => : ivhunter February 05, 2012, 10:03:22 AM



: GoogleFonts: Cyrillic?
: ivhunter February 05, 2012, 10:03:22 AM
Hello.
I'm looking for a new template for my site. I tested the Vertex template with joomla 2.5, but found that I can't use cyrillic Google Fonts.

I have in the header
:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cuprum" />
But must be
:
<link rel='stylesheet'  type='text/css'href='http://fonts.googleapis.com/css?family=Cuprum&subset=cyrillic,latin' />
Where I can to change it?


: Re: GoogleFonts: Cyrillic?
: mikek February 06, 2012, 08:06:12 AM
Hello,

I tried to find some information on this in google's documentation, but couldn't find much. You may have to use standard fonts in Arial.


: Re: GoogleFonts: Cyrillic?
: viakoven February 19, 2012, 01:25:52 PM
Modify index.php in the template directory as follows:

<?php if ($s5_fonts_high == "Open Sans Condensed") { ?>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php echo $s5_fonts_high;?>:300" />
<?php } else {?>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php echo $s5_fonts_high;?>&subset=cyrillic,latin" />
<?php } ?>


: Re: GoogleFonts: Cyrillic?
: N February 21, 2012, 01:15:58 PM
I found the same problem when tested.
Here is how I have solved it.

The following method approaches also for other accessible national language character set.
Just replace "cyrillic" with needed character set, or add character sets further separated by commas, for multi-language support.
Format of character set name must be supported by Google, pre-check it on the Google Web Fonts page.
( Based on  this (http://code.google.com/apis/webfonts/docs/getting_started.html#Subsets) )

I think this topic would be useful for other international users. May be to pin this topic on a more visible place?
In the future it would be useful to add this functionality to the framework admin interface, as I wrote at the end of the note.

How to add Site Font character set:

in file:
templates\shape5_vertex\vertex\css_and_js.php

find line: (in my case №28)
:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php echo $s5_fonts;?>" /> 

replace with line:
:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php echo $s5_fonts;?>&subset=latin,cyrillic" />


How to add Highlight Font character set:

in file:
templates\shape5_vertex\index.php

find line: (in my case №36)
:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php echo $s5_fonts_highlight ?>" />

replace with line:
:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php echo $s5_fonts_highlight ?>&subset=latin,cyrillic" />


How to make working preview in admin interface:

in file :
templates\shape5_vertex\vertex\admin\js\jquery.vertexAdmin.min.js

find line: (in my case №996)
:
var style_sheet = jQuery('<link href="http://fonts.googleapis.com/css?family=' + font + '&v2" rel="stylesheet" type="text/css" />');

replace with line:
:
var style_sheet = jQuery('<link href="http://fonts.googleapis.com/css?family=' + font + '&subset=latin,cyrillic" rel="stylesheet" type="text/css" />');

(I haven't found that "&v2" means, probably it since those times when Google tested Web Fonts version 2, and now it is irrelevant.)

To make a preview of the custom character set just add the sample phrase in the preview text using the needed character set. Here "Русский шрифт" means "Russian font" in russian, using cyrillic сharacter set. The sentence like this allows you to see the effects in both English and Russian text at the same time.

Important!:
before you add text with another character set, save the file in UTF-8 format to avoid the appearance of "broken symbols" in preview ( i use notepad++ for edit files).

find line: (in my case №998)
:
var preview = jQuery('<div />').addClass('font-preview').text('This is a preview of your chosen font.');

replace with line:
:
var preview = jQuery('<div />').addClass('font-preview').text('This is a preview of your Русский шрифт.');

Note:
Seems like at least one of the variables used for this purpose ( $googleFonts ) is taken from the cache and changes will take effect after you reset the cache or after you update this variable (such as adding a new font).


How to add another google fonts to list:
(For example, to add "PT Sans Narrow" font:)

in file:
templates\shape5_vertex\vertex\admin\googleFonts.php

locate the end of column with $googleFonts variables and add line whith font family name: (in my case №104)
:
$googleFonts['PT Sans Narrow'] = 'PT Sans Narrow';

Important!:
1.When you find font in google page, copy the font family name exactly as it is in google webfont page. As i can see, vertex engine will automatically replace any spaces in the font family name with plus signs (+),when generating the page, as is necessary to make the right links.

2.Seems like variable $googleFonts was cached and changes will take effect after you reset the cache or after you update the variable (such as adding a new font).


And at last a small wish to developers.

Structure of the framework is well designed and I do not think it would be difficult to make a special variable, editable in the admin menu, which sets the selected by user, depending on the desired encoding, value of "&subset" for the entire framework, as well as to make the text font preview available for editing in the admin interface.

Good work, has added this framework in my bookmarks.
Best Regards, Nick