What I want and what I wonder
I would like to use self-hosted font within a Next.js application
What i already tried
https://i.stack.imgur.com/AuIwB.png
https://i.stack.imgur.com/P6ekH.png
The result
In both cases CSS only recognizes the last font
Important
My Bold, Medium, Italic and regular fonts are separeted file, they are all in woff2 format.
I already tried to use diferente #font-face for each file (bold,regular and medium) and name each one, it works, but i think could be a more eficient way
You need to add one #font-face per style (including weights and italic versions).
The font-family name should stay the same!
Otherwise styles won't get mapped correctly to the specific font files.
Currently you're just overriding your first url – "Metropolis-Medium.woff2" won't be loaded at all since it's replaced by "Metropolis-Bold.woff2".
Multiple URLs can be used for fallback formats (e.g woff2, woff2, ttf etc.)
Without any font-weight values the browser will map the family-name "Metropolis" to "Metropolis-Bold.woff2" file and regular font-weight (or 400).
For better compatibility, you should use more verbose rules like so:
(Albeit some browsers might be more forgiving)
#font-face {
font-family: Metropolis;
font-weight: 400;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Regular.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Regular.woff")
format("woff");
}
#font-face {
font-family: Metropolis;
font-weight: 400;
font-style: italic;
src: url("../../../public/fonts/metropolis/Metropolis-Italic.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Italic.woff")
format("woff");
}
#font-face {
font-family: Metropolis;
font-weight: 500;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Medium.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Medium.woff")
format("woff");
}
#font-face {
font-family: Metropolis;
font-weight: 700;
font-style: normal;
src: url("../../../public/fonts/metropolis/Metropolis-Bold.woff2")
format("woff2"),
url("../../../public/fonts/metropolis/Metropolis-Bold.woff") format("woff");
}
body {
font-family: Metropols, sans-serif;
}
.medium {
font-weight: 500;
}
.bold {
font-weight: 700;
}
Related
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
My custom font (Gilroy, purchased on myfonts) is having issues across browsers. The font is thicker and bigger in Chrome than on other browsers.
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)
This is such a noob question, but here goes...
I'm seeing a lot of examples using the following styling when loading fonts from local server:
#font-face {
font-family: "Roboto";
src: local(Roboto Thin),
url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: "Roboto";
src: local(Roboto Medium),
url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Light.woff") format("woff");
font-weight: 500;
font-style: normal;
Notice that the font-family both are called Roboto.
How can I in my styling let my browser know that I want to use the Thin or the Medium font?
On other projects I've used font-family: "Roboto Light" when loading font from external page.
You can call it in your styling by defining the font-weight that is defined in the #font-face.
So when you want to use "Roboto Thin" set font-weight: 100; and for "Roboto Medium" set font-weight: 500; respectively.
Similarly, if you were to change the font-style inside the #font-face you can set your custom fonts for italics and bold.
I am using multiple web fonts of the same family to avoid browsers from rendering in faux-bold and faux-italics. When declaring selectors, I set the same name for all font-family properties and am using font-weight and font-style to differentiate.
Here's an example I'm using for Exo.
#font-face {
font-family: "exo";
src: url("../fonts/exo/exo-regular.eot");
src: url("../fonts/exo/exo-regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/exo/exo-regular.woff2") format("woff2"),
url("../fonts/exo/exo-regular.woff") format("woff"),
url("../fonts/exo/exo-regular.ttf") format("truetype"),
url("../fonts/exo/exo-regular.svg#exo") format("svg");
font-weight: "normal";
font-style: "normal";
}
#font-face {
font-family: "exo";
src: url("../fonts/exo/exo-bold.eot");
src: url("../fonts/exo/exo-bold.eot?#iefix") format("embedded-opentype"),
url("../fonts/exo/exo-bold.woff2") format("woff2"),
url("../fonts/exo/exo-bold.woff") format("woff"),
url("../fonts/exo/exo-bold.ttf") format("truetype"),
url("../fonts/exo/exo-bold.svg#exo") format("svg");
font-weight: "bold";
font-style: "normal";
}
p {
font-family: "exo", sans-serif;
}
I have confirmed that a paragraph tag is not inheriting font-weight from another selector.
From the above CSS I am expecting a <p/> tag to have a normal font weight. Instead, all instances of <p/> are bold. When checking the browser inspector, the font-weight, it reads as 'normal.'
I am also using Roboto with web fonts for all things normal, bold, italics, and bold-italics. Whatever is the last #font-face selector listed is what gets used be default.
I've seen different ways to implement this approach using different font-family names (e.g. font-family: "exo-bold"), but I shouldn't have to do that. My objective is to:
Use multiple web font files that represent the font in different states (e.g. exo-regular.woff, exo-bold.woff).
Use the same font-family name for all weight and style variants of the same font.
Include font-weight and font-style properties to identify those variants.
Set weight and style using other CSS or markup like <strong>.
It seems like I've done this before and it's worked. Can anyone spot an error in my approach?
No quotes should be used in your font-weight and font-style rules. This will work:
#font-face {
font-family: "exo";
/* files for normal weight */
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "exo";
/* files for bold weight */
font-weight: bold;
font-style: normal;
}
Actually, in CSS you only need quotes when you have spaces or other reserved characters in your font names or file names. So this should work:
<!-- language: lang-css -->
#font-face {
font-family: exo;
src: url(../fonts/exo/exo-regular.eot);
src: url(../fonts/exo/exo-regular.eot?#iefix) format(embedded-opentype),
url(../fonts/exo/exo-regular.woff2) format(woff2),
url(../fonts/exo/exo-regular.woff) format(woff),
url(../fonts/exo/exo-regular.ttf) format(truetype),
url(../fonts/exo/exo-regular.svg#exo) format(svg);
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: exo;
src: url(../fonts/exo/exo-bold.eot);
src: url(../fonts/exo/exo-bold.eot?#iefix) format(embedded-opentype),
url(../fonts/exo/exo-bold.woff2) format(woff2),
url(../fonts/exo/exo-bold.woff) format(woff),
url(../fonts/exo/exo-bold.ttf) format(truetype),
url(../fonts/exo/exo-bold.svg#exo) format(svg);
font-weight: bold;
font-style: normal;
}
p {
font-family: exo, sans-serif;
}
I personally only use quotes in CSS when it doesn't work without.
But you never quote normal CSS terms, as they'll stop working.
Web fonts tend to come split up into separate files for bold, italic, etc. I'm using a #font-face declarations like this (trimmed down to WOFF only for this example):
#font-face {
font-family: 'OpenSans';
src: url("fonts/OpenSans-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSansItalic';
src: url("fonts/OpenSans-Italic.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSansBold';
src: url("fonts/OpenSans-Bold.woff") format("woff");
font-weight: normal;
font-style: normal;
}
And then I implement the various styles:
body {
font-family: "OpenSans", Helvetica, sans-serif;
}
strong {
font-family: "OpenSansBold", Helvetica, sans-serif;
font-weight: normal; /* Web font is already bold */
}
em {
font-family: "OpenSansItalic", Helvetica, sans-serif;
font-style: normal; /* Web font is already italic */
}
I have to override the UA's bold/italic styling (the commented lines above). Otherwise, it will add a faux-bold/italic look to the text which is very ugly.
If I were to leave it like that, and one of the web font files failed to load, then the fallback font would not have the proper style. For example, this:
<strong>This text is bold</strong>
would display as Helvetica regular if OpenSans-Bold.woff failed to load, but I want it to be Helvetica bold.
How do you make sure that your fallback fonts get the correct bold/italic/regular styling?
you want to combine your #font-face rules.....only declare one font-family name, and declare the weights as your variables, like bold, italic, etc. the example below shows how to use Open Sans Regular with Open Sans Bold:
#font-face{font-family:"open_sansregular";
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot");
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg");
font-weight:normal; font-style:normal}
#font-face{font-family:"open_sansregular";
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot");
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"),
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg");
font-weight:bold; font-style:normal}
if you are familiar wtih #font-face rule, its so easy...the only differences in the two rules above is the url(s) and the font-weight. so for italic, change the url to point to the italic font, and then change the style to font-style:italic.
there's a bunch of benefits you get from this, including less rewrites because you're not going to have to redeclare each font...you only declare it once.
but that essentially reduces your css to this:
body{font-family:"OpenSans", Helvetica, sans-serif}
strong{font-weight:700}
em{font-style:italic}
then simply build a better font stack that provides the amount/level of coverage that you desire.