I'm trying to create a font-family in css like so:
(I have multiple font sources per font for different browsers but didnt want to put them all in here)
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-Thin.eot");
font-weight: "100";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-ExtraLight.eot");
font-weight: "200";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-Light.eot");
font-weight: "300";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-Regular.eot");
font-weight: "normal";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-Medium.eot");
font-weight: "500";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-SemiBild.eot");
font-weight: "600";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-Bold.eot");
font-weight: "bold";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-ExtraBold.eot");
font-weight: "800";
font-style: "normal";
}
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-Black.eot");
font-weight: "900";
font-style: "normal";
}
My browser is only rendering out the last file, Montserrat-Black, even when I specifically set the font weights on different elements. As far as I am aware you could declare the same font-family with different weights. Anyone know why this would be happening?
Your font-weight and font-style descriptor values are all quoted strings. That's not correct. They are numbers and keywords respectively, which means the quotes are not supposed to be there.
The reason why the Black weight is being selected is because, since your font-weight and font-style descriptors are all invalid, every single #font-face rule is pointing to the same weight and style (normal), causing the last of these rules to override all of the rest. And since there are no other known weights for this font family (since the descriptors are all invalid), the Black weight is used regardless of the value of font-weight that you set on your elements.
Remove the quotes
#font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-ExtraBold.eot");
font-weight: 800;
font-style: normal;
}
Related
I'm a little unclear on how to use #font-face in my current situation. The client provided me with several font files such as FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, etc.
I understand that typically I would do the following:
#font-face {
font-family: FontName;
src("path/FontName.otf") format("opentype")
}
Do I have to specify each one of the font names provided? How does css know which font is the default and which font to apply to bold (when the <strong> tag is used) or italic (when the <em> tag is used?
You would use multiple #font-face 's, like so:
#font-face {
font-family: "FontName";
src: url("FontName-Black.otf") format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "FontName";
src: url("FontName-BlackItalic.otf") format("truetype");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "FontName";
src: url("FontName-Bold.otf") format("truetype");
font-weight: bold;
font-style: normal;
}
Then to specify just use this:
body { font-family:"FontName", //you can add the exact fonts you want to use here }
h1 { font-weight:bold; }
p { font-style:italic; }
strong p{
font-weight:bold;
font-style:italic;
}
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)
I'm trying to manually add a custom font to my localhost installation of WP, what I did so far:
download the font (Computer Modern) from fontsquirrel in .woff format
take the 4 files needed (Serif): Roman (cmunrm), Bold (cmunbx), Oblique (cmunti), Bold Oblique (cmunbi)
put the 4 files in the folder C:\xampp\htdocs\sitename\wp-includes\fonts\latex
write the following in style.css
CSS code
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff');
font-style: normal;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff');
font-weight: bold;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunti.woff');
font-style: italic, oblique;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbi.woff');
font-weight: bold;
font-style: italic, oblique;
}
body {
font-family: "Computer Modern", serif;
}
write the following in the WP editor
HTML code
This is normal text
<strong>This is bold text</strong>
<em>This is oblique text</em>
<em><strong>This is bold and oblique text</strong></em>
but the result is this
It seems that only Bold and Oblique have been loaded, in fact by replacing cmunti with cmunrm (Oblique with Roman) and cmunbi with cmunbx (Bold Oblique with Bold) in the CSS file this is showed
What is this due to, and how to solve it?
Does it help to be explicit with font-weight and font-style in each definition? That's what this answer does. It also adds css that makes strong/em associated to font-weight/font-style explicitly (which may be unneeded).
Don't know why but this solved the problem
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff');
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunti.woff');
font-style: italic;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff');
font-weight: bold;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbi.woff');
font-weight: bold;
font-style: italic;
}
I have a case where I have already defined font-face declarations
#font-face {
font-family: 'some font';
src: url('somelink') format('woff');
font-weight: 900;
font-style: normal;
}
I have no ablilty to edit this code, but I need to add one more declaration(font-display: optional), is there a way to do that?
Currently what am I doing is that I am just overwriting this declaration in the stylesheet where I have control with something like this:
#font-face {
font-family: 'some font';
src: url('somelink') format('woff');
font-weight: 900;
font-style: normal;
font-display: optional;
}
But I am not even sure if it works. How would you test that? Is there a better way to do it? Thanks in advance.
You can't override #font-face definitions.
Common practice is to create a new #font-face with a different name and then use the new name in font-family:
#font-face {
font-family: 'some font 2';
src: url('somelink') format('woff');
font-weight: 900;
font-style: normal;
font-display: optional;
}
.item {
font-family: 'some font 2`
}
I have to import the Klavika font and I've received it in multiple shapes and sizes:
Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf
Now I would like to know if it's possible to import those into CSS with just one #font-face-query, where I'm defining the weight in the query. I want to avoid copy/pasting the query 8 times.
So something like:
#font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf), weight:normal;
src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
Actually there is a special flavor of #font-face that will permit just what you're asking.
Here's an example using the same font-family name with different styles and weights associated with different fonts:
#font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "DroidSerif";
src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
For a full overview of this feature and the standard use take a look at this article.
EXAMPLE PEN
#font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}
Update 2022: use variable fonts
Provided your font is available as a variable font you can actually combine multiple font-weights in a single #font-face rule like so:
#font-face {
font-family: 'Roboto Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 0% 200%;
src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}
We need to specify a font-weight range by adding 2 values:
font-weight: 100 1000;
slider_weight.addEventListener("input", function () {
var axisValue = slider_weight.value;
testarea.style.fontWeight = axisValue;
value_weight.innerText = axisValue;
});
slider_width.addEventListener("input", function () {
var axisValue2 = slider_width.value;
testarea.style.fontStretch = axisValue2+'%';
value_width.innerText = axisValue2;
});
body{
font-family: 'Roboto Flex';
font-size:5vw
}
#font-face {
font-family: 'Roboto Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 0% 200%;
src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}
#testarea {
font-size: 2em;
transition:0.5s;
font-weight:100;
font-stretch: 0%;
}
.regular{
font-weight:400
}
.bold{
font-weight:900
}
.condensed{
font-stretch:0%;
}
<h1 class="bold">Roboto Flex bold</h1>
<h1 class="regular condensed">Roboto Flex regular condensed</h1>
<label for="slider_weight">Weight</label>
<input type="range" id="slider_weight" name="slider" value="100" min="100" max="1000" step="10">
<span id="value_weight">100</span>
<br>
<label for="slider_width">Width</label>
<input type="range" id="slider_width" name="slider" value="0" min="0" max="200" step="1">
<span id="value_width">0</span>
<p id="testarea" contenteditable="true">Type something ...</p>
Retrieving google variable fonts ... tricky
I highly recommend this post, since the current google fonts UI isn't particularly helpful:
How To Get The Variable Font Links From Google Fonts?
Keep in mind the #font-face won't automatically apply font weights to emphasized elements like <strong> or <h1><h2><h3> etc.
So make sure, you specify the desired font weights for a predictable rendering like so:
/* Variable fonts: we can apply intermediate weight values - yay! */
strong{
font-weight: 623
}
Don't rely on keyword-based weights or styles (e.g semi-bold, medium, semi-condensed etc.)
For instance: what is the difference between "medium" and "semibold"?
... It depends on the font design, your font's weight range and actually on your design decision.
Some fonts are by default rather "bold" others rather "thin" or "light" (related post: Some Google font doesn't have Semibold font type)
/* Roboto 400 is too bold for me – map default/regular weight 400 to 300 */
body{
font-family: "Roboto Flex";
font-weight: 300;
}
/* Roboto 700 is not bold enough for me – map default/bold weight 700 to 1000*/
strong{
font-weight: 1000
}
/* ... OK a medium weight might be handy – lets say 625 */
.medium{
font-weight: 625
}
/* condensed or expanded styles: font-stretch < 100 = condensed;
font-stretch > 100 = expanded; */
.condensed{
font-stretch:0%;
}
.semi-condensed{
font-stretch:50%;
}
.semi-expanded{
font-stretch:200%;
}
.expanded{
font-stretch:200%;
}
If like me you need to load Roboto fonts without hitting Google's servers it should look like:
/* Thin */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Thin.ttf) format('truetype');
font-style: normal;
font-weight: 100;
}
/* Light */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Light.ttf) format('truetype');
font-style: normal;
font-weight: 300;
}
/* Normal */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Regular.ttf) format('truetype');
font-style: normal;
font-weight: 400;
}
/* Medium */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Medium.ttf) format('truetype');
font-style: normal;
font-weight: 500;
}
/* Bold */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Bold.ttf) format('truetype');
font-style: normal;
font-weight: 700;
}
/* Black */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Black.ttf) format('truetype');
font-style: normal;
font-weight: 900;
}
Then do the same for the italic variants if needed.
See font-weight documentation for clues on mapping names to numerical weight. Here is Roboto font downlond link.
Use Tranfonter, saved me a ton of time: https://transfonter.org/