Joomla Templates Club 406,261 posts

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#198804

Hi, I want to change to font type to a google font
Muli
<link href=’http://fonts.googleapis.com/css?family=Muli’ rel=’stylesheet’ type=’text/css’>

But im not sure how to do it.

I looked at this guide http://www.joomlart.com/documentation/joomla-faqs/embed-font

but where do i start, i dont have that profile :
Extensions >> Template Manager then open JA Template style. In the Profiles tab

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

#538885

What do you mean “you don’t have that profile?” :confused:

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#538886

the profile tab is for joomla 2.5 right ?

im using latest 3.3

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

#538887

You can try this method as well —>

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#538915

But if i just follow the instruction
http://www.joomlart.com/documentation/joomla-faqs/embed-font#google-font-t3

I added
<file>http://fonts.googleapis.com/css?family=Muli':400,700,600,500,300</file>
in assets.xml file located in templates/template_folder/etc folder

I removed

<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>http://fonts.googleapis.com/css?family=Raleway:400,700,600,500,300</file>
<file>http://fonts.googleapis.com/css?family=Roboto+Slab:400,700</file>

What else should i do? It didn’t change anything.

UPDATE: added <file>fonts/font-awesome/css/font-awesome.min.css</file> back to the file , could see i needed that for the icons 🙂

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

#539071

So you were able to resolve your issue?

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#539085

No can’t figure it out

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

#539090

<em>@hjalte1983 432494 wrote:</em><blockquote>No can’t figure it out</blockquote>

Did you try the @FontFace method I suggested above?

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#539092

@tomc was kinda hoping it was just a simple solution with the assets.xml file..

But i’ll try your suggestion

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#539102

@tomc this css is killing me..
so i downloaded the Muli font from http://www.fontsquirrel.com/fonts/muli

But im not sure how i should paste it in the code

/* 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;
}


I only have .ttf files. I can see you have added some other files ?

and where should i add this code ? i want Muli to be both in the decor theme and mijoshop theme

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

#539116

Did you follow ALL of the steps within the tutorial I linked to?

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

http://nicewebtype.com/notes/2009/10…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.

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#539120

Hey Tom i somehow got it to work, the other way. But thanks anyways

[Author]

Posts