Member Avatar for 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

  • 4 Contributors
  • 4 Replies
  • 395 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Nice thread — good observations from and useful starters from and . The reason Oswald (or the CBS font) appeared on the laptop even when not installed is that those sites deliver the face as a webfont, not by relying on local system fonts. Two practical routes are common: use a trusted CDN (Google Fonts) for easy inclusion and automatic format coverage, or self‑host the font files for full control (privacy, caching, subset control).

A compact, modern self‑host example (different from earlier snippets) showing multiple formats and a performance flag:

@font-face {
  font-family: 'OswaldLocal';
  src: url('/fonts/oswald-regular.woff2') format('woff2'),
       url('/fonts/oswald-regular.woff')  format('woff'),
       url('/fonts/oswald-regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1, h2, .article-title {
  font-family: 'OswaldLocal', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
}

Practical tips and pitfalls to watch for:

  • Use WOFF2 + WOFF for best size/compatibility; add EOT only if targeting very old IE.
  • font-display: swap prevents long invisible-text delays (FOIT).
  • When self‑hosting across domains, ensure the server sends correct MIME types and an Access‑Control‑Allow‑Origin header.
  • Subset (latin/basic) and gzip/brotli compress font files to cut load time. Limit the custom face to headings if overall page weight matters.
  • Google Fonts already hosts Oswald under an open license (easy and safe), but self‑hosting may be preferred for privacy or offline builds — always verify the font’s license before redistribution.

Credit to and for pointing to web fonts and for the compatibility pointers. This workflow explains how sites like wnd.com/CBS make non‑traditional faces appear on visitors’ screens even when those fonts aren’t installed locally.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Edited by JorgeM
Member Avatar for 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("");
    }

    span {
        font-family: "fontName";
    }
Edited by gon1387
Member Avatar for 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.

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.