Font issue windows and mac

[s_cristina]

Hi,

I have the font orator std for my webpage. On mac it shows normal ( safari, chrom) but on windows it shows an other font (chrom, Micros. Edge).

Why is this happening?

Thanks…

[Atelierbram]

Do you use @font-face?

If not it could simply be that this “orator std” font is not installed on your window PC while it is on your Mac.

Can you show a link to a live webpage or demo?

[s_cristina]

Yes I am using @font-face..

Here is a link to the site.

[s_cristina]

or is on this code something wrong?

@font-face {
                font-family: orator std, sans-serif;
                src: url(fonts/OratorStd.otf);
                font-weight: normal;
              }

[s_cristina]

Okey I found out.. Had the wrong code.

@font-face
{
    font-family:'orator std';
    font-weight:normal;
    src: url("../fonts/OratorStd.otf");
    src: url("../fonts/OratorStd.otf") format('embedded-opentype'), url("../fonts/OratorStd.otf") format('woff'), url("../fonts/OratorStd.otf") format('truetype');
    font-style: normal;
}

Now works perfectly :)

[Atelierbram]

Congrats, but the @fontface syntax can be made more bulletproof.

The line with:

 url("fonts/OratorStd.otf") format('woff'), 

can be removed: it isn’t doing anything, because this is trying to serve an Open Type format font as woff-format; browsers will not understand this and ignore it.
Presumably the last bit, serving an Open Type font as truetype is what makes this work across browsers.

There may be another problem with this approach however which has to do with licensing. One of the reasons why the woff-format for webfonts was invented has to do with this, you can read up on this if you want searching for “The Web Open Font Format (WOFF) MDN”.

The way the font is served here as an Open Type font is probably not allowed according to the license of the font being used.

Options are:

• leave it as it is and live in sin ;)
• buy the webfont, just the woff/woff2 fonts (can be bought for just € 35,-) and serve those
• don’t use a webfont at all, use system fonts (search for “monospace fontstack”)
• serve another free webfont, maybe one that comes close to this “Orator Std”

On the last point, the Orator font that was chosen (good taste BTW), is kind of unique, in the sense that this is a unicase font. Unicase meaning lowercase characters are rendered as small-caps.

When wanting to create the same effect with any other font then there is the CSS property-value pair font-variant-caps: small-caps to the rescue. (There is also text-transform: uppercase but this is not the same)

  body {
  margin: 0;
  font: 100%/1.6 Camingocoderegular, Consolas, Monaco, "DejaVu Sans Mono", "Courier New", monospace;
  font-variant-caps: small-caps; 
  background-color: white;
  text-align: center;
}

It is possible to generate your own light-weight unicase webfont with the CSS property-value pair font-variant-caps: small-caps, combined with the sub-setting technique when generating a web-font. I write about this here.

A few remarks on the HTML-markup: these <br> tags can be like this without the slash, but can also be avoided when wrapping those individual lines in <p> tags. Some nesting errors as well like <p><h2>arq. 17 atelier</h2></p> this should be just <h2>arq. 17 atelier</h2>.

The CSS can be cleaned up a bit, like values for text-align are inherited. When there is text-align: center on body, then all elements will inherit this: all text will be centred, so no need to repeat this on all elements in the CSS. Don’t really need media-queries for this layout when using a value for max-width on .container as far as I can see.

[Atelierbram]

BTW a valid @font-face rule using only woff and woff2 may look something like this:

@font-face {
  font-family: 'camingocoderegular';
  src: url('fonts/camingocode-regular.woff2') format('woff2'),
       url('fonts/camingocode-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal; 
}

[Author]

Posts