I want to use a non-traditional font for my website

[ManzarOx]

Hello everyone, hope you all are doing good. i have revamped my website which is an online magazine (www.mag4you.com), new look will be launched within 2 weeks (Insha ALLAH). the main problem i am facing is this: i want to use "Oswald" font face for headings of the articles. but my developer just told me that this font is not traditional like arial and georgia, so this wont load on a good number of computer screens. but, within my head, i become resolute that i will find a problem to this solution just like i am resolute to use oswald font for my magazine to give it a fresh look (its a must have).

the reason why i become resolute is this: i am an old visitor of www.wnd.com a political website. they also use oswald too, and this font is loading on my laptop screen since forever, even when it wasnt installed in my operating system until recently. moreover, www.cbsnews.com has also a bold and beautiful font, which also looks non-traditional and it is also not installed in my laptop, but i can see that font.

so my question is; tell me a way to get this font displayed successfully on every visitor's screen, even when it is not installed in their operating systems (just like oswald wasnt installed in mine but it used to load successfully on my screen) and CBSnews.com font is loading on my screen. what these two websites, among others, are doing? any idea? ALLAH bless you all

[JorgeM]

You may want to look into the use of web fonts. The downside is that while most browser support it, web fonts are not supported by IE8 or earlier.

I have a sample of how to implement web fonts and an example of how it would render on the screen if you have a supported browser. Take a look and do some more research. Outside of web fonts, I am not aware of any other method to centrally store a font for download by the user agent (browser).

CSS3 Web Fonts

Good luck in the re-introduction of your site.

[gon1387]

Hi ManzarOx.

You can use the @font-face rule to have your own font used.

It goes like this, in a typical setup for a font rule you commonly use generic font family such as 'serif' or 'sans-serif', or a more specific type like "arial" or "time new roman". You apply a font-family like this:

span {
    font-family: serif, 'sans-serif';
}

When you use @font-face you define your own font-family. If you're going to use your own font, make sure it's in an open type or true type. Here's a simple example:

@font-face{
    font-family: "[Your Font Family Name]";
    src: url("[Font File URL]")
}

span {
    font-family: "[Your Font Family Name]";
}

...

    @font-face{
        font-family: "fontName";
        src: url("http://example.com/fontName.otf");
    }

    span {
        font-family: "fontName";
    }

[ManzarOx]

well to be honest, i wasnt expecting this much quick and QUALITY respone from this thread. thanks both of you, Jorge and Gon. i am just copy/pasting your response in an email to my developer, i simply dont have words to say thanks. just a prayer from the bottom of my heart that ALLAH bless you most!
and jorge, thanks mate for wishing me good luck.

[<M/>]

This may help you a bit if your going to have any issues with the web fonts for multiple browsers: http://blog.freelancer-id.com/2010/06/02/custom-font-for-all-browsers/