We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Fonts for Themes; Team Blurb
Topic Started: May 25 2011, 08:31 AM (4,348 Views)
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]

Posted Image
Posted Image


Fonts


Be creative and add a little spice to that theme of yours instead of using those simple boring fonts all the time (i.e. Arial, Tahoma, etc).
You can do this by using web fonts!

You can start off with Google Web Fonts: http://www.google.com/webfonts

Pick a font you want and click on it.
Then click Use this font
Then you will get a script; as an example I picked the font Jura
Code:
 
<link href='http://fonts.googleapis.com/css?family=Jura' rel='stylesheet' type='text/css'>


Paste this link in your JavaScript section of your Board Template or even your Theme Layout.

Next thing you have to do is add it to your CSS. Pick a ID or class and add the following:
Code:
 
font-family: 'Jura'


Example:
Code:
 
h1 { font-family: 'Jura', arial, serif; }





For those advanced coders, you can implement @font-face.
Code:
 
@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}


You will have to upload your own font.
Offline Profile Quote Post Goto Top
 
Nimor
Member Avatar
Fireman
[ *  *  *  * ]
Awesome stuff! I'll definitely use this. ;)
I've been dying to use Charlemagne STD for some of my themes... ;)
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I've been seeing this used more and more on themes, we might try it some time. :)
Offline Profile Quote Post Goto Top
 
joshuasabat3
Member
[ * ]
Hey thanks I am learning Java and I am sure this code will help me. So I can change font name,size also.
Offline Profile Quote Post Goto Top
 
Arly
Member Avatar
Member
[ *  *  * ]
I was just starting to get nored of always using the same font. This'll help loads, and it's easy enough to do too! Thanks for sharing!
Offline Profile Quote Post Goto Top
 
Dakota
Member Avatar
over my dead body
[ *  *  *  *  *  * ]
If you're using anything but Arial, Tahoma, or Droid Sans you're doing it completely wrong.
Offline Profile Quote Post Goto Top
 
Arly
Member Avatar
Member
[ *  *  * ]
I still intend to use Arial for the majority of the text, but for h2s and top menu and submenu I'm having a fiddle with some of these texts and making sure that they are (most importantly) readable in any theme I use. If there's anything I can't stand about a lot of themes I come across it's the inability to read either tiny text sizes or unreadble font types, so yeah, Arial most definitely for the main text :)
Offline Profile Quote Post Goto Top
 
james12345-ZNR
Member
[ * ]
Thanks for the nice idea. I will definitely try it for my upcoming website.There are many options of fonts when you are developing joomla templates, i am one of the big fan of joomla.I like that.I made so many website templates specially in CSS Templates but i can not help my self to appreciate joomla.
Edited by james12345-ZNR, Aug 11 2011, 01:37 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Some @font-face support notes:

It appears all latest top five browsers with the exception of Internet Explorer supports OTF files. IE4+ supports EOT files and WOFF for IE9+.

In accordance to my tests, browsers do not support @font-face absolute URLs on different servers, for this reason access control headers have to be used for absolute URL support. I couldn't figure out how or if these even work on IF or ZB, I have a pending request to determine if they will work, however.

Here's what I mean by the font not being read on different servers; the font was uploaded on server 13:

Font being read correctly (server 13): http://prntscr.com/2uzzq
Font being read incorrectly: (server 8): http://prntscr.com/2v006
Offline Profile Quote Post Goto Top
 
Canimia
Member Avatar
Parachute? This is obviously a Hot Air Balloon!
[ *  *  * ]
Is there a way to get one of these fonts to show up in posts, like in the font selector, so my members can use it, too?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Here's the code: http://if.invisionfree.com/topic/5087482/1/
Offline Profile Quote Post Goto Top
 
Canimia
Member Avatar
Parachute? This is obviously a Hot Air Balloon!
[ *  *  * ]
Can someone explain a little more clearly how using uploaded fonts works? I would love to use gearbox in a place or two, but am not sure how to use @font face or whatever.

EDIT: nevermind, used dropbox to upload my fonts, it worked after that. :D
Edited by Canimia, Aug 29 2013, 12:54 AM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme Tricks · Next Topic »
Add Reply