Public Forums 71,145 posts

[s3nko Friend s3nkoJoin date: February 2013Posts: 9Downloads:0Uploads:5 Thanks: 2 Thanked: 2 times in 1 posts]

#194971

How to change font in purity iii? Some letters (Đ,Č, and Ć), from my language (bosnian) are missing .
thx
tryed to set google fonts but unsuccessfully. :((:((:((:((:((

http://test.ganibegovic.com

http://ganibegovic.com/index.php/onama/1-o-nama

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#523469

Is there a particular font type/ground that contains these characters?

[s3nko Friend s3nkoJoin date: February 2013Posts: 9Downloads:0Uploads:5 Thanks: 2 Thanked: 2 times in 1 posts]

#523470

Gabriela, Gilda Display all google fonts and a lot of more

https://www.google.com/fonts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#523471

Here is a possible solution to your issue . . . .

USING @FontFace for Non-Traditional/Alternative Fonts On Your Site

I have to give a shout out to Moderator scotty for pointing me in the direction of @FontFace as an alternative to using the cufon method of using alternative fonts.

I am very excited about this method because I was having the damndest time trying to use the
“cufon” method to use a particular font for my main navigation. It DID replace the main nav font, but it also affected the sub-nav menu items in a way I did not want – and I couldn’t figure out how to circumvent the issue . . . UNTIL scotty pointed me in the direction of the @FontFace method.

The method is actually VERY simple (so long as you get all the syntax correct in your css code).

Here are a couple of links to explain the process . . .

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

http://www.miltonbayer.com/font-face/

http://sixrevisions.com/css/font-face-guide/

FOR A PRACTICAL EXAMPLE OF HOW I USED IT in my JA TEMPLATE . . .

First I utilized FontSquirrel’s @FontFace Generator (http://www.fontsquirrel.com/) to generate the @FontFace font files I would need – in my case, “League Gothic” I then created a “fonts” folder (within my template css folder) and uploaded the font files there.

the structure looks like this . . .

– your template
—- css
——- fonts

I then inserted the @fontface css code into (in my case) my mega.css file and designated the font for the particular div/class I wanted it to appear, as follows . . .


/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
@font-face {
font-family: 'League Gothic';
src: url("../../css/fonts/League_Gothic.eot") format('eot');
src: local("☺"),
url("../../css/fonts/League_Gothic.otf"),
url("../../css/fonts/League_Gothic-webfont.wof") format('woff'),
url("../../css/fonts/League_Gothic-webfont.ttf") format('truetype'),
url("../../css/fonts/League_Gothic-webfont.svg#webfontpm5EArBj") format('svg');
font-weight: bold;
font-style: normal;
}

#ja-mainnav ul.level0 li a {
display: block;
text-decoration: none;
font-size: 30px;
color: #000
font-weight: 500;
padding-top: 16px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
height: 37px;
text-transform: uppercase;
font-family: League Gothic, Helvetica, Arial, sans-serif;
}

You need to make sure you designate the correct path to the fonts (within the fonts folder you created).
I found out, though some trial-and-error” that precise syntax is key.

But WHALLA, IT WORKS as it should and now you can use non-traditional/alternative fonts for various parts of your site.

Hope this has been of some use and benefit for you.

[s3nko Friend s3nkoJoin date: February 2013Posts: 9Downloads:0Uploads:5 Thanks: 2 Thanked: 2 times in 1 posts]

#523518

<em>@TomC 412267 wrote:</em><blockquote>Here is a possible solution to your issue . . . .

USING @FontFace for Non-Traditional/Alternative Fonts On Your Site

I have to give a shout out to Moderator scotty for pointing me in the direction of @FontFace as an alternative to using the cufon method of using alternative fonts.

I am very excited about this method because I was having the damndest time trying to use the
“cufon” method to use a particular font for my main navigation. It DID replace the main nav font, but it also affected the sub-nav menu items in a way I did not want – and I couldn’t figure out how to circumvent the issue . . . UNTIL scotty pointed me in the direction of the @FontFace method.

The method is actually VERY simple (so long as you get all the syntax correct in your css code).

Here are a couple of links to explain the process . . .

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

http://www.miltonbayer.com/font-face/

http://sixrevisions.com/css/font-face-guide/

FOR A PRACTICAL EXAMPLE OF HOW I USED IT in my JA TEMPLATE . . .

First I utilized FontSquirrel’s @FontFace Generator (http://www.fontsquirrel.com/) to generate the @FontFace font files I would need – in my case, “League Gothic” I then created a “fonts” folder (within my template css folder) and uploaded the font files there.

the structure looks like this . . .

– your template
—- css
——- fonts

I then inserted the @fontface css code into (in my case) my mega.css file and designated the font for the particular div/class I wanted it to appear, as follows . . .


/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
@font-face {
font-family: 'League Gothic';
src: url("../../css/fonts/League_Gothic.eot") format('eot');
src: local("☺"),
url("../../css/fonts/League_Gothic.otf"),
url("../../css/fonts/League_Gothic-webfont.wof") format('woff'),
url("../../css/fonts/League_Gothic-webfont.ttf") format('truetype'),
url("../../css/fonts/League_Gothic-webfont.svg#webfontpm5EArBj") format('svg');
font-weight: bold;
font-style: normal;
}

#ja-mainnav ul.level0 li a {
display: block;
text-decoration: none;
font-size: 30px;
color: #000
font-weight: 500;
padding-top: 16px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
height: 37px;
text-transform: uppercase;
font-family: League Gothic, Helvetica, Arial, sans-serif;
}

You need to make sure you designate the correct path to the fonts (within the fonts folder you created).
I found out, though some trial-and-error” that precise syntax is key.

But WHALLA, IT WORKS as it should and now you can use non-traditional/alternative fonts for various parts of your site.

Hope this has been of some use and benefit for you.</blockquote>

I appreciate your help, but Is there any simplier way to add google fonts to ”ja purity iii” template.
i wanna change fonts to whole template.
thx

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#523519

Here is a video tutorial on how to add Google Fonts to your template/site . . . .

http://www.youtube.com/watch?v=ae2cb_Uab_o

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#523732

If you want to use Google fonts, you just need to define the google fonts you want to use in the file templates/purity_iii/etc/asset.xml


<stylesheets>
<file>http://fonts.googleapis.com/css?family=Gabriela'</file>
</stylesheets>


Additionally, with your native language which contains special character, please also try to change the database colllation of your website to UTF8.

1 user says Thank You to Saguaros for this useful post

1. s3nko

[s3nko Friend s3nkoJoin date: February 2013Posts: 9Downloads:0Uploads:5 Thanks: 2 Thanked: 2 times in 1 posts]

#523831

<em>@Saguaros 412579 wrote:</em><blockquote>If you want to use Google fonts, you just need to define the google fonts you want to use in the file templates/purity_iii/etc/asset.xml


<stylesheets>
<file>http://fonts.googleapis.com/css?family=Gabriela'</file>
</stylesheets>


Additionally, with your native language which contains special character, please also try to change the database colllation of your website to UTF8.</blockquote>

Thanks man!!!! :D:D:D:D
database collation solved the problem.

i embed stylesheet and Javascript, google fonts, upload fonts, installed plugins, and nothing. >:(>:(>:(>:(

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#523874

You are welcome!!!

[smartmax Friend smartmaxJoin date: May 2008Posts: 538Downloads:159Uploads:218 Thanks: 72 Thanked: 7 times in 3 posts]

#530586

Very nice way to work with the Google fonts, Great tip Saguaros!

I did the same, also the database collation,
some fonts have changed to the Google font, and some are still the same(?)
especially in the menu’s and the body text haven’t changed.

http://www.sanders.nl/NIEUW/

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#530744

@smartmax: your site looks fine now: http://prntscr.com/39syot

[smartmax Friend smartmaxJoin date: May 2008Posts: 538Downloads:159Uploads:218 Thanks: 72 Thanked: 7 times in 3 posts]

#530815

Hi Saguaros,
thank you for looking and checking it out.

But I have the feeling that the menu’s haven’t changed to: ‘family=Archivo+Narrow’
a narrow kind of type font 🙂

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#530883

You can follow the documentation below to add the new font into your site: http://www.joomlart.com/documentation/purity-iii/configuration#add-font

Then create a new CSS file called custom.css in the path: /templates/purity_iii/css and add this css rule:


.navbar-default .navbar-nav > li > a {
font-family: /*your font goes here*/;
}

.t3-module.module_menu .module_menu .nav > li > a {
font-family: /*your font goes here*/;
}


[Author]

Posts