Joomla Templates Club 406,261 posts

[country212 Friend country212Join date: February 2011Posts: 82Downloads:0Uploads:15 Thanks: 8 Thanked: 1 times in 1 posts]

#169945

How would you go about changing the font and it’s size to a custom font of my own creation in the JA MENU ?

To something like the word ‘BOOKING’ on the homepage at http://www.frostcity.com ?

Is there a way to use images in place of the menu’s text?

Something like this

---

Attachments:

1. 

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

#420929

MY recommendation for using custom fonts within any site development (including JoomlArt templates) is [URL=http://www.joomlart.com/forums/topic/how-to-use-fontface-for-alternative-fonts/

[country212 Friend country212Join date: February 2011Posts: 82Downloads:0Uploads:15 Thanks: 8 Thanked: 1 times in 1 posts]

#420932

Will take a look at it tomorrow and see if I can implement this correctly.

Thanks

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

#420934

<em>@country212 277893 wrote:</em><blockquote>Will take a look at it tomorrow and see if I can implement this correctly.
</blockquote>
Sure Thing . . .

The most recent JA template I used it in was JA Methys, and it worked just like I wanted it to.
I’ll be anxious to see if you were able to achieve the result you wanted using this method.

[country212 Friend country212Join date: February 2011Posts: 82Downloads:0Uploads:15 Thanks: 8 Thanked: 1 times in 1 posts]

#421084

I went to the fontsquirrel.com and downloaded a couple fonts, created a font folder within my template’s css folder and uploaded the .ttf files.

Opened up the template.css file in an editor and found

/* MAIN NAVIGATION
——————————————————— */
#ja-mainnav {
padding: 0;
position: relative;
z-index: 9999;
float: left;
}

#ja-mainnav a, #ja-subnav a {
outline: none;
line-height: normal;

I also opened up the file : templates/ja_quartz/ja_menus/ja_cssmenu.css and think that this is where to add the code.

/* STYLING THE MENU
———————————–*/
/* 1st level */
#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 110%;
color: #586C0A;
padding: 30px 15px;
font-weight: bold;
text-transform: uppercase;
}

#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus {
color: #A9105C;
}

#ja-cssmenu li:hover a,
#ja-cssmenu li.sfhover a,
#ja-cssmenu li.havechildsfhover a,
#ja-cssmenu li.havechild-activesfhover a {
background: url(../../images/mainnav-active.gif) repeat-x center bottom;
color: #FFFFFF;
}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: url(../../images/mainnav-active.gif) no-repeat center bottom;
color: #FFFFFF;

I am confused as to what to replace and where to add the code.

Am I just supposed to replace this :

/* 1st level */
#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 110%;
color: #586C0A;
padding: 30px 15px;
font-weight: bold;
text-transform: uppercase;
}

with the code mentioned in this post?
http://www.joomlart.com/forums/topic/how-to-use-fontface-for-alternative-fonts/

I replaced it with the exact path to the fonts and it’s not showing properly. I uploaded the whole fontface_kit including the stylesheet.css file into the fonts folder.

[country212 Friend country212Join date: February 2011Posts: 82Downloads:0Uploads:15 Thanks: 8 Thanked: 1 times in 1 posts]

#421088

I came up with this:

/* STYLING THE MENU
———————————–*/
/* 1st level */
@font-face {
font-family: ‘DESTROY’;
src: url(“http://www.frostcity.com/templates/ja_quartz/css/fonts/DESTROY_-webfont.eot”) format(‘eot’);
src: local(“263A”),
url(“http://www.frostcity.com/templates/ja_quartz/css/fonts/DESTROY_-webfont.otf”),
url(“http://www.frostcity.com/templates/ja_quartz/css/fonts/DESTROY_-webfont.wof”) format(‘woff’),
url(“http://www.frostcity.com/templates/ja_quartz/css/fonts/DESTROY_-webfont.ttf”) format(‘truetype’),
url(“http://www.frostcity.com/templates/ja_quartz/css/fonts/DESTROY_-webfont.svg#webfontpm5EArBj”) format(‘svg’);
font-weight: bold;
font-style: normal;
}

#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 30px;
color: #c90606;
font-weight: 500;
padding-top: 16px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
height: 37px;
text-transform: uppercase;
font-family: DESTROY, Helvetica, Arial, sans-serif;

for whatever reason, the .otf file was not in the kit so i used a online conversion tool and made one and put it into the fonts folder

[country212 Friend country212Join date: February 2011Posts: 82Downloads:0Uploads:15 Thanks: 8 Thanked: 1 times in 1 posts]

#421094

I took their css file from the font kit but I think I am not inserting the URL correctly.

@font-face {
font-family: ‘DestroyRegular’;
src: url(‘DESTROY_-webfont.eot’);
src: url(‘DESTROY_-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘DESTROY_-webfont.woff’) format(‘woff’),
url(‘DESTROY_-webfont.ttf’) format(‘truetype’),
url(‘DESTROY_-webfont.svg#DestroyRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;}

can help with the correct URL path please, how to insert it properly into this code.

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

#421387

<em>@country212 278091 wrote:</em><blockquote>
can help with the correct URL path please, how to insert it properly into this code.</blockquote>
I’m not sure I understand your statement/question above . . . can you clarify?

[country212 Friend country212Join date: February 2011Posts: 82Downloads:0Uploads:15 Thanks: 8 Thanked: 1 times in 1 posts]

#421396

I don’t know how else to clarify what I am saying. Can you ftp into my site and take a look at the file please?

templates/ja_quartz/ja_menus/ja_cssmenu.css

I followed your recommendations as best as I could from the link you gave in your post and tried changing things around numerous times, yet the actual font will not display.

It looks to not be using the :
/* 1st level */
@font-face {

code part

and only using this part :

#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 30px;
color: #c90606;
font-weight: 500;
padding-top: 16px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
height: 37px;
text-transform: uppercase;

[Author]

Posts