The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript @font-face problem

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #33704

    Hi all – Been doing some testing with @font-face and have kind of hit a wall here.

    I did a little test page a few weeks ago, which seems to work fine …

    Yesterday I started working on a site for a friend of mine, using the same font, and everything went screwy. It seemed as soon as I added a new font, it either would not preview or other fonts that previously were ok would not preview correctly.

    So I decided to back up and do a really simple page, with only 2 text styles …

    You can see the bold weight is not working (same issue as the other site I’m working on). The font files were copied from my florinfonttest folder, and are all loose in the same folder I have my CSS stylesheet in.

    Any thoughts as to why this isn’t working?



    Ok i’ll try to make it as easy as possible (my english is not brilliant as it should).

    On your styleseet you are importing 4 different fonts right now

    what you are trying to do is import 4 variants of the same font, to do this you have to change the values of the font-weight and font-size on your @font-face

    Here an example

    @font-face {
    font-family: 'FlorinSans';
    /** cutted out the urls to shorten **/
    font-weight: normal;
    font-style: normal;

    @font-face {
    font-family: 'FlorinSans'; /** Note that i'm using the same name for the bold **/
    /** cutted out the urls to shorten **/
    font-weight: bold; /** change this to the corrispective font weight **/
    font-style: normal; /** change this to the current font style **/

    Hope it helps


    Hi, I was really confuse about the font-face and I find a better solution from Google. Check it here



    @Rai Google Web Fonts are convenient but not necessarily better, especially if they don’t have the font you are after!


    The Google fonts won’t really help as I’ve purchased and must use the font in a website.

    KarimCossutti: The code I have in my test pages is what was provided by FontSpring, and it works in my first test site. It just doesn’t seem to work in anything else I create, despite building it the same way.


    The @font-face code you’re using is correct. Are you sure you’re linking to the fonts? Is it happening in all browsers or just a specific one?


    I don’t think the problem is the CSS bit, I think it’s because you haven’t included a bold version of the font.


    @thealiks did you take the time to check the web page above? Use firebug, the header font is bold.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.