CSS Font Differences Between Browsers

How to prevent different browsers rendering fonts differently?

Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.

Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

Hope that helps.

CSS font differences between browsers

Even with identical CSS rules and identical font files you will never have exactly identical rendering:

modern font formats are composed of layers of overlapping instructions, where the "new better" way does not replace previous iterations, but is present in addition to those. The advantage is that old software can still read the old-style instructions and work as before. The disadvantage is that the same property is described in many different ways and they do not give the same results (you'd think the newest layer would give the best results but the font designer may have only extensively tested and debugged an older one)
to add insult to injury some are system-specific (Windows, OS∕2, OSX…) so even the same generation of software won't read the same instructions depending on the target system
lastly even if a font only contained a single instruction layer, and all your browsers read it completely, they would have some leeway in interpreting it. On an ideal retina screen with high pixel density they'll all use the same shapes and coordinates, but actual screens have too low pixel densities to display small complex text shapes accurately. So the text engines have a choice between displaying sharp but jaded lines (distorting the glyph shapes so they snap to a monochrome pixel grid) or smooth but blurry lines (approximating ideal shapes by playing on pixel grayness level or even subpixel colors). Those adjustments will move text pixels around.

Depending on the system text rendering conventions are not identical. OSX will lean towards smooth blurry rendering, Windows towards sharp jaded rendering, and the Linuxes cover all the choices in-between.
And of course, even on the same system the same software won't make the same choices depending on the quality (pixel density) of the hardware available.

For some insight on all the possible rendering strategies a text engine can choose see

https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M

You can not usually control the text rendering compromise chosen by the browser from your web site. Even if you could forcing windows-style rendering on osx (or the reverse) would only annoy uses that want your web site to behave like all the other text they see on their screen. And in fact, the more tolerant your web site will be to browser's font rendering choices, the better it will be. A web site is dynamic. A web site can reflow. Pixel-perfect is not a user ideal. If you want pixel-perfect, serve them a bitmap image, and you'll quickly see how much it is appreciated.

Therefore, only use @font-face for specific design effects, and not to try to force a specific text pixel placement on your site. The first will work beautifully. The second, not at all. If you use @font-face do remember fonts are covered by copyright so sharing any font requires legal permission.

PS. Helvetica is an old font design. It has been derived so many times requesting 'Helvetica' on different systems will yield a plethora of results. So this is a font that can not be used on the web without @font-face.

fonts opentype text-rendering

Same font except its weight seems different on different browsers

Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.

Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.

UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.

However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:

Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
Using images (resources are demanding and hard to maintain)
Replacing Flash (need some programming and doesn't work on iOS)

UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:

text-rendering: optimizeLegibility;

More references here:

Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.

Font looks different in different browsers?

Because font-family: sans-serif; is set, each browser set's their own standard font. This can ofcourse differ between different browsers.

In chrome, you can set the default fonts at chrome://settings/, under advanced settings.

In safari it is less easy, but I could find this post.

In reaction to your edit, you should always define a font stack in CSS to ensure that the correct font is shown.

A font stack is a stack of fonts, used to define different fonts to be chosen. It looks as follows:
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

This defines Arial as the standard font. If however Arial is not found, Helvetica Neue is chosen. If that font is also not present, Helvetica get's set. In the very unlikely case that even Helvetica isn't present, the standard sans-serif font, set by the browser, is chosen.

For reference, you could check out this website. It has a lot of standard font stacks you can use in your CSS.

Custom font different across browsers (Safari/Chrome/Firefox)

The font size is the same, but your letters in Chrome are bolder than in Firefox. That's because you are importing your fonts wrong.

Currently you are using:

@font-face {
  font-family: "Cobury Regular";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Cobury Bold";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

... {
  font-family: "Cobury Regular";
}
... {
  font-family: "Cobury Bold";
}

But the correct way would be:

@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

... {
  font-family: "Cobury";
  font-weight: normal;
}
... {
  font-family: "Cobury";
  font-weight: bold;
}

Always use font with their actual font-weight. Don't treat the same font with different weight and style like different fonts.

Your .woff font files have implemented meta tags inside, which telling the browser what thickness the letters have. If the provided font-weight in the import statement @font-face doesn't match with that, browsers will treat that differently, because there is no standard for that. (Chrome tries to handle the situation by adding a additional thickness to the already bold font, for whatever reason.)

Edit:
I'm seeing that you use h1, .text-logo #logo { font-weight: 900; ... in your CSS but you have never defined the font with the weight number 900. Please use only the weights you have provided via @font-face. (With my suggestion it would be normal and bold)

Consistent font-size across browsers (web development)

Use px (pixels) instead of pt (points) for your font size units. Then you'll be dealing with pixel sizes.

Beware however, depending on how your site is used. There have been lawsuits (in the US) over accessibility issues on websites that result from "hard-coding" the font size.

Very different font sizes across browsers

Use unitless line-height for BODY (or HTML) element:

BODY {line-height: 1.25; }