-
1. Re: Don't Understand this Font CSS
SnakEyez02 Feb 9, 2012 9:42 AM (in response to pcford)The font-family in an @font-face rule is you define the name to call the font in the rest of your CSS. For instance:
.class { font-family: "Gothamy"; }
-
2. Re: Don't Understand this Font CSS
pziecina Feb 9, 2012 9:44 AM (in response to pcford)Hi
Gothamy is the name given to the font by the @font-face rule and is the name you must use to refer to the font for its use in your css.
If the font Gotham is prohibited for use via @font-face then the renaming is a crude attempt to get round this, and is still illegal. Anyone looking at the css for your site would read the @font-face rule and know this.
PZ
-
3. Re: Don't Understand this Font CSS
pcford Feb 9, 2012 9:52 AM (in response to pziecina)Thanks to you both for answering this. As I understand it, the use of "Gothamy" is arbitrary...a name given by the original designer...right?
I recognize the web restrictions on Gotham's creators; I am not trying to work around this. As I read the CSS, my understanding is that Gotham is being called if it is on the visitor's machine...I would think that is a legal use...am I wrong?
Sorry, my web skills are hopelessly out of date and am struggling to remodel a site....I made a grevious error by attempting to change the existing markup rather than just start anew.
Thanks for any advice.
-
4. Re: Don't Understand this Font CSS
pziecina Feb 9, 2012 9:55 AM (in response to pcford)pcford wrote:
Thanks to you both for answering this. As I understand it, the use of "Gothamy" is arbitrary...a name given by the original designer...right?
I recognize the web restrictions on Gotham's creators; I am not trying to work around this. As I read the CSS, my understanding is that Gotham is being called if it is on the visitor's machine...I would think that is a legal use...am I wrong?
Hi
Wrong, the name Gothamy was probably given to it to circumvent the restriction by someone other than the font designer, and its use is still illegal.
PZ
-
5. Re: Don't Understand this Font CSS
pcford Feb 9, 2012 10:11 AM (in response to pziecina)Mmmm, ok.
Again, I am not trying to circumvent the restrictions; I am just trying to educate myself. I don't understand why the use of "Gothamy" would be considered an effective ploy to work around the restriction, while the actual font name appears in the next line. -
6. Re: Don't Understand this Font CSS
mhollis55 Feb 9, 2012 11:19 AM (in response to pcford)You're really talking about two different issues here.
The @font-face at-rule allows you to define custom fonts. It was first defined in the CSS2 specification, but was removed from CSS2.1. Currently, it’s a draft recommendation for CSS3. People have been using it since the CSS2 specification. You can use any of the typefaces that Google is hosting on their webfonts page for free.
One may also purchase a web font from a number of the foundries, like Monotype (which hosts fonts.com), Adobe (which hosts Typekit fonts) and so on. When one purchases a font license, some foundries will allow web usage.
What you cannot do is use a typeface on a website that does not allow for web-based versions. That is a violation of your agreement with the foundry and if you'e doing that, you (or your client) may be sued. It's the same thing as putting a photograph on a website without permission from the photographer or model. So if you have a shot you really like of Christie Brinkley, you could get into trouble if you post it on your website without first obtaining permission (read purchase the rights).
Gotham is a family of geometric sans-serif digital typefaces designed by American type designer Tobias Frere-Jones in 2000. Because it's such a new typeface, there are probably a lot of restrictions on the usage. But if someone uses an application like Fontlab's Fontographer, one could create a font based on Gotham. And one could use Font Squirrel to create a WOFF font for browsers and use it that way. Were I to do that, I might be tempted to call the typeface "gothamy" or, perhaps "batman."
But if you're using Fontographer, you won't get the hinting and the spacing of the original typeface from the foundry. If the typeface is pretty much monospaced, that's probably not going to be an issue, but for most type to look good, you need hinting.
Personally, I'd either buy a proper license or use the free Google fonts. I don't like the karmic issues that may come with stealing other peoples' work.
-
7. Re: Don't Understand this Font CSS
pcford Feb 9, 2012 11:53 AM (in response to mhollis55)Just to be clear...I have been given a website to remodel...I chose to use another website in the same company as a model. I have no wish (zero, zilch, nada) to circumvent license restrictions. This css is what was existing when I started working on the site....It has been years since I have done a website; my skills are well behind the times. (I am a video editor here.) I realize now that choosing to remodel an existing site was like trying to change all the framing in a house while retaining the sheathing. The original site has some very silly errors. For example, the page that one sees on the screen is made out of three parts: top, middle and footer. These elements are triggered in turn by javascript. This might have some advantages in some cases. In this case, it prevents the page title from changing. In other words, all page titles in the site are the same. Now, as the page title is significant for seo, this is a rather serious error. I clearly should have just started over with a blank slate using the existing graphic elements. I wanted to save myself effort and it actually caused more work.
This whole project is the 137th worst thing I have ever done...this a lot of competition at the top... I have had a lot of trouble finding a well written, succinct explanation of @font-face. It may well be that I my brain is fried from spinning my wheels on this project for weeks.
I anyone has a good explanation of @font-face I would appreciate it.
And please, no more lectures on copyright restrictions; it is simply not helpful. From my time doing video, I am well aware of the issues. I have attempted to make that clear, but I guess not well enough.
-
8. Re: Don't Understand this Font CSS
mhollis55 Feb 9, 2012 12:08 PM (in response to pcford)Welcome to the wild and wooly world of the web. I worked for NBC for over 9 years doing the show opener for Nightly News. Been there.
Read the W3C's article on fonts. The W3C stands for the Worldwide Web Consortium which makes "standards" as if standards were voluntary. But they do serve as a kind of FCC for websites.
From the article, this is how you use the @font-face:
The general form of an @font-face at-rule is:
@font-face { <font-description> }
where <font-description> has the form:
descriptor: value;
descriptor: value;
[...]
descriptor: value;
To use a downloadable font called Gentium, do this in your CSS:
@font-face {
font-family: Gentium;
src: url(http://yourdomain.com/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }
The user's browser will download Gentium and use it when rendering text within paragraph elements. If for some reason the site serving the font is unavailable, the default serif font will be used. This is because the alternative to Gentium was lised as "serif." Always list a typeface that is common to all operating systems as a fall-back.
-
9. Re: Don't Understand this Font CSS
pcford Feb 9, 2012 1:02 PM (in response to mhollis55)Ok, That was good, thanks. I see src: local being used for the source of the font. Why would one use @font-face if you want to call a font on the visitors machine? Why wouldn't you just use the old font hierarchy: fancy serif font, Times, serif, for example.
Working for NBC...that is certainly major league...I imagine you were doing motion graphics? Must be a lot of pressure...the news pretty much always starts at 6pm, and not 10 minutes later.
I do corporate video here, shooting, cutting, editing and some motion graphics...I am working on doc about community of artists.
Web stuff is frustrating because it is relatively more abstracted compared to video....If a clip is too dark or shot you change it...must more "hands-on" than web stuff, especially css, especially css layout.
Thanks again.
-
10. Re: Don't Understand this Font CSS
mhollis55 Feb 9, 2012 1:28 PM (in response to pcford)If you are bored stiff and want to get more bored, some of my work is here:
http://www.youtube.com/watch?v=SNoExzi79mU
http://www.youtube.com/watch?v=rUX6LFA4MoM
http://www.youtube.com/watch?v=kpYuX-9aevU
And Nightly News airs at 6:30 PM Eastern time with a 7:00 PM update show, in case something got messed up or there is breaking news. WRC in Washington, DC always waited for the 7:00 PM update. Sometimes we did a Pacific Coast update if there was something really hot. Lots of local news begins at 6.
If what you are doing is standard web pages with normal typefaces, you need to use the typefaces that everyone has. So, if you define Helvetica as your font (It's installed on all Apple computers) you have to provide the Microsoft "fallback," which is (uglier) Arial. Then, since both of those are san-serif typefaces, you need a third fallback for Unix boxes that don't have either Helvetica or Arial. So, to define your regular paragraph styles that way, you do this in your body tag:
body {
font-family: Helvetica, Arial, sans-serif;
}
Now, everything in your spaces within the body element of your page will be Helvetica, with the fallback as Arial and the final fallback as any sans-serif font in the computer's system.
You will notice that we use a sans-serif typeface for body text on websites. You work in television, so you know that screen resolutions are very low as compared to print. If you read a book, you're looking at 1200 DPI or something near to that "faked" by a laser printer working at 600 DPI. On a Macintosh, screen resolution is usually 96 DPI and on Windows it's typically 72 DPI. That's really fuzzy. So we don't use serif type in body text on websites because we're not publishing in a book or magazine, which can show those serif typefaces and help the eye to move along, as serifs do in text. The resolution just isn't good enough to do that.
Typically, if you are defining a font to be used in a div, class or selector on a website, you need to restrict yourself to typefaces available on most users' computer systems. Here's a guide. Please understand that this tends to cover Macs and PCs and pretty much ignores Unix and Linux systems, save with fallbacks.


