I´m trying to use the @font-face to change the font-family (CSS) of my website, but it doesn´t work.
I tried to use @font-face in another page (not Omeka based) on the same server and worked fine. The sintax is also correct. I´m pretty sure that the problem is coming from Omeka.
Any idea how to solve this?
Could you post some more specifics of what you've tried (or links to pages showing the issue)?
Omeka really doesn't do much with your CSS other than link it to the page. It's possible that the file you've edited is part of the wrong theme or simply isn't being used, or that your font style rule is being overridden by some other style.
If you access this address: http://goldzweig.no-ip.org/teste/form_contato.php you´ll see that the font style is being controlled by @font-face (Look the source code)
the same "server", in that case, it´s my own machine with xampp installed, i put another folder, as you can see here: http://goldzweig.no-ip.org/omeka
I´m using the Rhythm theme, and changing it´s CSS.
If I try to change the font to Trebuchet MS, for example, it changes, but it´s not working with @font-face.
The fonts folder is correct, the path is correct.
I don´t know what else i can do to solve this.
I´t not a server config problem, cause my other page works OK!
When I look at both of those links with Chrome, I see the same Aller Regular font.
See my screenshot.
With Firefox, on the other hand, most of the text is Helvetica. The one obvious thing I see that's different between the two pages is that your
@font-face declaration is before your other styles on the contact form page, and after most of your styles in your modified Omeka CSS.
The order of the declaration in the file seems like one of those things that could easily vary between browsers. Maybe simply moving the
@font-face to be the first thing in your style.css will resolve your problem.
Seems that it worked!
I thought that the last declaration in CSS had more importance, but declaring it on the top of the sheet worked fine!
I think you have to declare @font-face at the top and then reference it in your font stacks below per each use. Without looking at the site, it could be that you were referencing the custom font before it was declared, which some browsers may forgive.
I think this is a pretty good place to start for others looking into this: http://sixrevisions.com/css/font-face-guide/