Back To Website Design Forum

Replacing all the fonts in your CSS

  • camperjohn
  • Guru
  • Guru
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 1127
  • Loc: San Diego
  • Status: Offline

Post November 20th, 2007, 6:14 pm

I would like to know a good way to replace all the fonts in my CSS, to see if they look good etc.

Is there a way in CSS to do the following:

#define FONT_A Helvetica,"Trebuchet MS"
#define FONT_A_SIZE 12

.table_x_section {
font-face: FONT_A;
font-size: FONT_A_SIZE;
}

Any ideas? My CSS is getting huge, and I don't want to reogranize it all. I just want to replace some fonts and some sizes.
Upload video and picture galleries at http://www.bodydot.com?post+upload+video+picture+gallery
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 20th, 2007, 6:14 pm

  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post November 20th, 2007, 6:27 pm

I'm not sure I follow you here. Do you want to change all of the fonts in your CSS across the board? If so, you can do

html, body {
font-family: Arial, Helvetica, etc, etc
font-size: 12px;
}

As long as you're not using IE to view the page, you can use selectors to replace the fonts in sub-elements as well:

* { font-family: Arial; font-size: 12px; }
* > * { font-family: Arial; font-size: 12px; }
* > * > * { font-family: Arial; font-size: 12px; }
* > * > * > * { font-family: Arial; font-size: 12px; }
* > * > * > * > * { font-family: Arial; font-size: 12px; }

I think that should work; someone please correct me if I'm wrong.
The Beer Monocle. Classy.
  • camperjohn
  • Guru
  • Guru
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 1127
  • Loc: San Diego
  • Status: Offline

Post November 20th, 2007, 6:52 pm

Well yes that's what I'm doing now. But I don't want to have to change every single one

I just want to have ONE location where there is FONT_SIZEA, and one location where FONT_SIZEB, and use that in my CSS

I dont want as I have now:

div { font-family: Arial; font-size: 12px; }
a { font-family: Arial; font-size: 12px; }
.color div { font-family: Arial; font-size: 12px; }
.color a { font-family: Arial; font-size: 12px; }
.more td div { font-family: Arial; font-size: 12px; }
.tags div { font-family: Arial; font-size: 12px; }

etc etc etc...
Upload video and picture galleries at http://www.bodydot.com?post+upload+video+picture+gallery
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post November 20th, 2007, 8:00 pm

I don't think it's possible. The closest you're going to get (from what I know) is using the selector method from my original post. If you next it a few more levels, it should cover every element in your document so that you don't have to go through and change things for each class/id individually.
The Beer Monocle. Classy.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 20th, 2007, 9:01 pm

You can do something like this...
Code: [ Select ]
<html>
<head>
<style>
.fontA{font-family:"Trebuchet MS";}
.fontB{font-family:verdana;}
.sizeA{font-size:22pt;}
.sizeB{font-size:40pt;}
.myP{padding:20px;margin:20px;border:1px solid #CCC;}</style></head>

<body>

<p class="myP sizeA fontA">Praesent consequat viverra nibh. Nam lobortis risus ac velit. Quisque mauris sem, hendrerit in, tincidunt vitae, pretium non, lacus. Suspendisse felis nibh, mollis vel, varius in, ultrices id, sem. Curabitur turpis. Mauris pellentesque felis. Cras elementum pretium nulla. Quisque pulvinar dui nec odio. Nunc nec tellus. Duis gravida. Vestibulum posuere turpis id leo. In hac habitasse platea dictumst. Sed porttitor eros id tortor.</p>

<p class="myP sizeB fontB">Curabitur volutpat pharetra nulla. Donec turpis dui, dignissim vitae, semper sit amet, lacinia venenatis, nisl. Mauris aliquet, metus sit amet dapibus convallis, nibh massa sodales orci, et dictum ligula tortor ac purus. Mauris felis magna, rutrum sit amet, pellentesque eu, venenatis ac, urna. Phasellus sit amet dolor. Pellentesque velit tortor, porttitor sit amet, aliquet nec, dignissim id, est. Nam venenatis augue ac nunc. Etiam malesuada, erat vel mollis vehicula, lectus neque blandit nisl, a fermentum felis arcu vel pede. Nunc commodo, quam ut tincidunt interdum, magna lorem interdum lorem, sit amet lobortis odio erat et augue. Ut elit. Fusce volutpat. Morbi ullamcorper massa ut mauris. Cras in nunc.</p>

<p class="myP">Donec dignissim ultrices diam. Suspendisse potenti. Morbi dui neque, nonummy sit amet, blandit ut, pellentesque non, diam. Fusce interdum aliquet dui. Sed tellus odio, mollis id, tristique a, pharetra vel, felis. Pellentesque in ipsum. Etiam massa sem, condimentum vel, posuere in, lacinia eu, magna. Nullam tincidunt interdum sapien. Morbi tellus metus, porttitor ac, pretium eu, rutrum eget, urna. Donec mollis. Suspendisse adipiscing ipsum id enim. Aliquam nec arcu. In faucibus nibh ut dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></body></html>
  1. <html>
  2. <head>
  3. <style>
  4. .fontA{font-family:"Trebuchet MS";}
  5. .fontB{font-family:verdana;}
  6. .sizeA{font-size:22pt;}
  7. .sizeB{font-size:40pt;}
  8. .myP{padding:20px;margin:20px;border:1px solid #CCC;}</style></head>
  10. <body>
  12. <p class="myP sizeA fontA">Praesent consequat viverra nibh. Nam lobortis risus ac velit. Quisque mauris sem, hendrerit in, tincidunt vitae, pretium non, lacus. Suspendisse felis nibh, mollis vel, varius in, ultrices id, sem. Curabitur turpis. Mauris pellentesque felis. Cras elementum pretium nulla. Quisque pulvinar dui nec odio. Nunc nec tellus. Duis gravida. Vestibulum posuere turpis id leo. In hac habitasse platea dictumst. Sed porttitor eros id tortor.</p>
  14. <p class="myP sizeB fontB">Curabitur volutpat pharetra nulla. Donec turpis dui, dignissim vitae, semper sit amet, lacinia venenatis, nisl. Mauris aliquet, metus sit amet dapibus convallis, nibh massa sodales orci, et dictum ligula tortor ac purus. Mauris felis magna, rutrum sit amet, pellentesque eu, venenatis ac, urna. Phasellus sit amet dolor. Pellentesque velit tortor, porttitor sit amet, aliquet nec, dignissim id, est. Nam venenatis augue ac nunc. Etiam malesuada, erat vel mollis vehicula, lectus neque blandit nisl, a fermentum felis arcu vel pede. Nunc commodo, quam ut tincidunt interdum, magna lorem interdum lorem, sit amet lobortis odio erat et augue. Ut elit. Fusce volutpat. Morbi ullamcorper massa ut mauris. Cras in nunc.</p>
  16. <p class="myP">Donec dignissim ultrices diam. Suspendisse potenti. Morbi dui neque, nonummy sit amet, blandit ut, pellentesque non, diam. Fusce interdum aliquet dui. Sed tellus odio, mollis id, tristique a, pharetra vel, felis. Pellentesque in ipsum. Etiam massa sem, condimentum vel, posuere in, lacinia eu, magna. Nullam tincidunt interdum sapien. Morbi tellus metus, porttitor ac, pretium eu, rutrum eget, urna. Donec mollis. Suspendisse adipiscing ipsum id enim. Aliquam nec arcu. In faucibus nibh ut dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></body></html>


Otherwise, "Find and Replace" works pretty good for me. ;)
- dM
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post November 21st, 2007, 1:37 am

"Find and Replace" works pretty well if I keep an index of all fonts used at the top or bottom of the stylesheet.

If you use a pre-processor for the page during development it gets to be really easy, which I'm sure you know.

I thought of an over-complicated method using comments & regular expressions that would make the template an actual finished product while still being a template, but it seemed too complicated to continue with.

Basicly I had somthing like this, if you can see where I was going with it.
Code: [ Select ]
.classy {
  color: #123456; /*$mainColor*/
  font-family: Verdana, Tahoma; /*$mainFont*/
}
  1. .classy {
  2.   color: #123456; /*$mainColor*/
  3.   font-family: Verdana, Tahoma; /*$mainFont*/
  4. }
Strong with this one, the sudo is.
  • camperjohn
  • Guru
  • Guru
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 1127
  • Loc: San Diego
  • Status: Offline

Post November 21st, 2007, 7:25 am

joebert wrote:
"Find and Replace" works pretty well if I keep an index of all fonts used at the top or bottom of the stylesheet.

If you use a pre-processor for the page during development it gets to be really easy, which I'm sure you know.

I thought of an over-complicated method using comments & regular expressions that would make the template an actual finished product while still being a template, but it seemed too complicated to continue with.

Basicly I had somthing like this, if you can see where I was going with it.
Code: [ Select ]
.classy {
  color: #123456; /*$mainColor*/
  font-family: Verdana, Tahoma; /*$mainFont*/
}
  1. .classy {
  2.   color: #123456; /*$mainColor*/
  3.   font-family: Verdana, Tahoma; /*$mainFont*/
  4. }



Yeah see that's a good idea! Ok I will use that!
Upload video and picture galleries at http://www.bodydot.com?post+upload+video+picture+gallery

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 96 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.