Hey,
I'm having an issue with custom fonts on my site. I copied the code from a Google Fontlibary CSS file

/* Custom fonts for the site */

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: normal;
  src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0') format('truetype');
}

/*Assign the custom font's to where there needed*/
h2{
	font-family: 'Reenie Beanie', arial, serif;
}

and that works fine, however I downloaded the font and saved it to my server but when I change the URL location of the file like

/* Custom fonts for the site */

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: normal;
  src: local('Reenie Beanie'), url('http://srudge.co.uk/res/fonts/font.ttf') format('truetype');
}

/*Assign the custom font's to where there needed*/
h2{
	font-family: 'Reenie Beanie', arial, serif;
}

What's wrong?
Thanx,
Sam Rudge

Recommended Answers

All 8 Replies

I should add that this IS working in both cases with Google Chrome and Safari but not Firefox, IE

font selection is css3.
CSS3 is not complete and only partially implemented,
no browser yet released supports all of css3 and what support there is is buggy as the standard is not complete
absolutely pointless to include something that will NOT work in 90%+ browsers, so google have on the helpscreens of their site how to make non-css3 browsers act like they know whats going on
http://code.google.com/apis/webfonts/docs/webfont_loader.html#Example

The WebFont Loader is served through the Google AJAX Libraries API.

It provides events that are fired at different stages of the loading of the fonts. You can either write code to react to those events, or use CSS styles defined by the library to automatically make styles change when fonts have finished loading

EDIT:: would (probably) be better to access the files off the google repositoroy, than your server,
their (Google) server farm is spread all over the world and is way faster than your server. gets you the advantage of multi-sourcing the http protocol allows only two files from each domain to parallel, but can stream 2 files from three domains (=6) at the same time.
Other sites are likely to be using the same file from google, if not now, in the near fuure, the browser may find the css already in the user tif and not dl it.

font selection is css3.
CSS3 is not complete and only partially implemented,
no browser yet released supports all of css3 and what support there is is buggy as the standard is not complete
absolutely pointless to include something that will NOT work in 90%+ browsers

Yes I understand CSS3 isn't complete, however my first code snippet WORKS in ALL 4 major browsers, however when I load the font from my own server with the exact same code it doesn't work.

Because I believe that some processing takes place on Google's server to make it work. I think (but I might be wrong) that you having the font on your server is not going to work. I haven't played with these fonts on google because when first looked there were only a very small number to choose from. But if you read the bit where google tells you how it works, it might say what they are doing in more detail and explain things. I was under the impression that to make it work you had to use the google link.

Because I believe that some processing takes place on Google's server to make it work. I think (but I might be wrong) that you having the font on your server is not going to work. I haven't played with these fonts on google because when first looked there were only a very small number to choose from. But if you read the bit where google tells you how it works, it might say what they are doing in more detail and explain things. I was under the impression that to make it work you had to use the google link.

I have done some testing and the SRC I inserted for the font is just a standard .ttf (Truetype Font) file (If you open it directly in your browser it downloads as a file called font.ttf)

Yes I understand CSS3 isn't complete, however my first code snippet WORKS in ALL 4 major browsers, however when I load the font from my own server with the exact same code it doesn't work.

sorry bloke was posting and thinking at the same time, took a bit to find the link was looking for, retry the above post

I have done some testing and the SRC I inserted for the font is just a standard .ttf (Truetype Font) file (If you open it directly in your browser it downloads as a file called font.ttf)

what you download and get in your browser has nothing to do with what the server is able to do with it, and whther the file is called as a download url or as a linked css file may effect the processing applied by the server.
thats what php perl asp python are for.

commented: Helpful as always +3

sorry bloke was posting and thinking at the same time, took a bit to find the link was looking for, retry the above post

Ahh right thanx,
I'm actualy trying to use my own custom fonts but after following the tutorials and not getting it to work I just started copying code from Google =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.