how to use google web fonts
-
-
- Robert Blackwell
- Sr. Rocketeer
- Posts: 203
- Thanks: 0
-
I'm wondering how to use specific google web fonts. My test site is using J2.5.9, with gantry 4.1.7 and lumiere template.
And under Style>Font Settings - I see a google font list, but I wasn't sure what to do there. my intention was to use custom css by editing css/rt_lumiere-custom.css as well as using some inline styling
I've tried the following 2 things
add a new class to templates/rt_lumiere/css/rt_lumiere-custom.css
.promo5 {
font-family: 'Acme', sans-serif;
}
.promo5 {
font-size: 4.2em;
line-height: 1.4em;
}
I've also tried inline styling
<span style="font-family: 'Acme', sans-serif;">my phrase</span>
However, neither of these two attempts work for me.
Thanks in advance
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
First you have to make sure that you have the correct font name. It could be that you need:
font-family: 'Acme Regular';
This can be confusing sometimes. - Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it
- DanG
-
-
-
- Robert Blackwell
- Sr. Rocketeer
- Posts: 203
- Thanks: 0
-
So would both of my examples be valid if I had the correct font name?
How do I determine the correct name?
For example on www.google.com/webfonts if I find acme font and select it, it will specifically display
<link href=' fonts.googleapis.com/css?family=Acme ' rel='stylesheet' type='text/css'>
and
font-family: 'Acme', sans-serif;
in their code snippet window
Also, in the Template>Style>Font Settings
I see Acme listed but it doesn't say anything other than Acme.
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
Can you provide a link to your site?
- Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- Robert Blackwell
- Sr. Rocketeer
- Posts: 203
- Thanks: 0
-
www.pacificshellsandmirrors.com
I haven't created any public pages using the new class or inline styles yet. But I made a test page for special viewers only I can pass over login details if you need.
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
- Sure, send me a PM with the info.
- Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- Robert Blackwell
- Sr. Rocketeer
- Posts: 203
- Thanks: 0
- Just pm'd the details and enabled the user
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
I just enabled Acme from the template's backend and it appears to be working fine.
h1, h2 {
font-family: 'Acme','Helvetica',arial,serif;
}
Why it doesn't show up in the promo is because of this code:
.promo1, .promo2, .promo3, .promo4, .promo-title {
font-family: 'SofiaProLight',Helvetica,Arial,Sans-Serif;
}
promo5 does work now when i try it in firebug on the main page:
<p class="promo5">I re-create what I have seen underwater and on the rocky shores and arrange shells, corral and sea glass into beautiful pieces of functional art.</p> - Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- Robert Blackwell
- Sr. Rocketeer
- Posts: 203
- Thanks: 0
-
I see what you did in the backend. That looks simple enough, and truthfully didn't think to try it... but I really only want to use the specified font on specific classes ie the .promo5 class in rt_lumiere-custom.css which now works
But I couldn't find any css/less file that contained
h1, h2 {
font-family: 'Acme','Helvetica',arial,serif;
}
Would it be possible to include one or more of the google fonts in the lumiere font group?
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
"Would it be possible to include one or more of the google fonts in the lumiere font group?"
That's an interesting idea that i have never tried...
What i do is:
1. Upload the fonts to /templates/rt_template/fonts/
2. Add the @font-face that is needed in rt_template-custom.css
3. Use the font-family rules anywhere i want. It doesn't matter if it is in an article or CSS.
This will override all Joomla/template fonts
You can use a million fonts if you want but each font you add will affect performance of your site. - Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
Time to create page: 0.067 seconds