-
AuthorPosts
-
hjalte1983 Friend
hjalte1983
- Join date:
- September 2012
- Posts:
- 328
- Downloads:
- 7
- Uploads:
- 105
- Thanks:
- 101
- Thanked:
- 9 times in 1 posts
June 13, 2014 at 9:39 pm #198804Hi, 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 tabTomC ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 13, 2014 at 9:44 pm #538885What do you mean “you don’t have that profile?” :confused:
hjalte1983 Friendhjalte1983
- Join date:
- September 2012
- Posts:
- 328
- Downloads:
- 7
- Uploads:
- 105
- Thanks:
- 101
- Thanked:
- 9 times in 1 posts
June 13, 2014 at 9:46 pm #538886the profile tab is for joomla 2.5 right ?
im using latest 3.3
TomC ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 13, 2014 at 9:49 pm #538887hjalte1983 Friendhjalte1983
- Join date:
- September 2012
- Posts:
- 328
- Downloads:
- 7
- Uploads:
- 105
- Thanks:
- 101
- Thanked:
- 9 times in 1 posts
June 14, 2014 at 7:14 pm #538915But if i just follow the instruction
http://www.joomlart.com/documentation/joomla-faqs/embed-font#google-font-t3I 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 folderI 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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 16, 2014 at 3:34 pm #539071So you were able to resolve your issue?
hjalte1983 Friendhjalte1983
- Join date:
- September 2012
- Posts:
- 328
- Downloads:
- 7
- Uploads:
- 105
- Thanks:
- 101
- Thanked:
- 9 times in 1 posts
June 16, 2014 at 4:56 pm #539085No can’t figure it out
TomC ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 16, 2014 at 5:12 pm #539090<em>@hjalte1983 432494 wrote:</em><blockquote>No can’t figure it out</blockquote>
Did you try the @FontFace method I suggested above?
hjalte1983 Friendhjalte1983
- Join date:
- September 2012
- Posts:
- 328
- Downloads:
- 7
- Uploads:
- 105
- Thanks:
- 101
- Thanked:
- 9 times in 1 posts
hjalte1983 Friendhjalte1983
- Join date:
- September 2012
- Posts:
- 328
- Downloads:
- 7
- Uploads:
- 105
- Thanks:
- 101
- Thanked:
- 9 times in 1 posts
June 16, 2014 at 6:30 pm #539102@tomc this css is killing me..
so i downloaded the Muli font from http://www.fontsquirrel.com/fonts/muliBut 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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 16, 2014 at 8:17 pm #539116Did 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
——- fontsI 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 Friendhjalte1983
- Join date:
- September 2012
- Posts:
- 328
- Downloads:
- 7
- Uploads:
- 105
- Thanks:
- 101
- Thanked:
- 9 times in 1 posts
June 16, 2014 at 9:09 pm #539120Hey Tom i somehow got it to work, the other way. But thanks anyways
-
AuthorPosts
This topic contains 12 replies, has 2 voices, and was last updated by hjalte1983 10 years, 4 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum