Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • s3nko Friend
    #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


    1. missing
    TomC Moderator
    #523469

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

    s3nko Friend
    #523470

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

    https://www.google.com/fonts

    TomC Moderator
    #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
    #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


    1. Capture
    TomC Moderator
    #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
    #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.

    s3nko Friend
    #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
    #523874

    You are welcome!!!

    smartmax Friend
    #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
    #530744

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

    smartmax Friend
    #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 🙂


    1. Schermafbeelding-2014-04-14-om-14.44.16
    Saguaros Moderator
    #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*/;
    }

Viewing 13 posts - 1 through 13 (of 13 total)

This topic contains 13 replies, has 4 voices, and was last updated by  Saguaros 5 years, 4 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum