I'm using the css #font-face function to define a custom font. The font is called 'Myriad Pro Bold', and as fallback I use Arial/Sans-Serif.
#font-face { font-family: MyriadProBold; src: url('fonts/myriadpro_bold.otf'); }
h3 { font-family: MyriadProBold, Arial, Sans-Serif; }
The font-weight: bold; element is only needed when Arial or another Sans-Serif font is shown. If I add font-weight: bold; to the tag and MyriadProBold loads, the bold font is becoming extra bold, which looks ugly.
So actually I'm looking for something like this
if h3 font is MyriadProBold
font-weight: normal;
else
font-weight: bold;
Help is appreciated, thanks!
Myriad Pro Bold is a bold typeface of the Myriad Pro family and should be declared that way:
#font-face {
font-family: "Myriad Pro";
src: url('fonts/myriadpro_bold.otf');
font-weight: bold;
}
Then you can simply let, say, h3 have their default boldness, or declare that explicitly if there is some “CSS reset” or other code that disturbs it:
h3 { font-weight: bold; }
Now you simply declare font family the natural way:
h3 { font-family: "Myriad Pro", Arial, sans-serif; }
Your fallback font do not match on weight with your custom font. However, there are bold variation of arial. You can try
h3 {
font-family:custom, 'Arial Bold', sans-serif;
}
Did you try to set the font-weight in #font-face?
#font-face {
font-family: "MyriadProBold";
src: url('fonts/myriadpro_bold.otf');
font-weight: normal;
}
h3 {
font-family: MyriadProBold, Arial, Sans-Serif;
font-weight: bold;
}
Not sure if it works but give it a try.
Related
My custom font doesn't work on different browsers. I imported 3 font weights using #font-face, all of them .tiff. But when I imported other variations (.eot, .woff, .woff2, .svg) all the text goes bold.
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-weight: lighter;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-weight: normal;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-weight: bolder;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bicyclette', Helvetica, sans-serif;
}
I also added Helvetica as a secondary font, but most browsers display it as Arial.
My website is deployed at novarion.ro.
My questions are: how can I make my custom font work on most browsers? And if that doesn't work, is there a way to keep it always Helvetica as the second option?
Using numeric font-weight seems to be more robust.
You might also add a font-style value if there are any italic styles in your html/css:
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-style: normal;
font-weight: 700;
}
body{
font-family: 'Bicyclette', Helvetica, sans-serif;
}
h1{
font-weight:700;
}
.light{
font-weight:300;
}
Besides, make sure all font-files are properly loaded (check your dev tool's console for 404s).
Helvetica Fallback
Provided, there is some Helvetica installed on a system - font-family names can be quite different.
You could add alternative font-family names as described by Chris Coyier: Better Helvetica
to make the browser search for several font names.
body {
font-family: Bicyclette, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
However, this approach merely improves your chances of seeing a proper Helvetica, if one is available.
Here's my problem:
In order to improve my SPEED mark on google speed insight, I had to switch from render-blocking google fonts to loaded locally google fonts.
So far so good except that I have a HUGE problem.
Before I was loading my fonts in this way:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300|Ubuntu+Condensed|Ubuntu:300,700" rel="stylesheet">
And in my huge style-sheet, I was just calling them normally for example:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
But now, since I had to download them to avoid the render-blocking red flag, I'm calling them in this way:
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Bold.ttf");
font-weight: 600;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-ExtraBold.ttf");
font-weight: 700;
}
#font-face {
font-family: "Opens Sans Condensed";
src: url("/fonts/OpenSansCondensed-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu Condensed";
src: url("/fonts/UbuntuCondensed-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Bold.ttf");
font-weight: 700;
}
And here you can see my PROBLEM.
I call different fonts with the same name, but they have different weights. Obviously, I can call them with a different name, for example, "Ubuntu Bold" but then I would have to change my entire stylesheet, for example, I should now declare:
body {
font-family: 'Open Sans Normal', sans-serif;
// font-weight: 400; //
}
p {
font-family: 'Open Sans Bold', sans-serif;
// font-weight: 700; //
}
Essentially, no more font-weight, only different font-family names to state the weight.
Is there any solution to my problem?
Even though the font files are different, you don't need to set a different font-family for each variation of the font. You can just set one font-family, and specify the different variations in the different #font-face properties.
You should define each #font-face with the same font-family name, like so:
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Italic.ttf");
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Bold.ttf");
font-style: normal;
font-weight: 600;
}
Note that each different font file has a separate #font-face with different properties that correspond to the specific font file, but they have the same font-family. You can then use the font in your css like so:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.bold {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.italic {
font-family: 'Open Sans', sans-serif;
font-style: italic;
}
The other properties in your css classes (font-weight, font-style, etc) will determine which #font-face is used.
I need to replace a existing font-face with Ariel Narrow. However the below code does not work.
#font-face {
font-family: site-generic-font;
src: local("Arial Narrow");
font-weight: 700;}
Ariel Narrow Is not being picked up on my Computer. The alternative below works so why won't the "local" code work?
font-family: Arial Narrow;
#font-face {
font-family: MyArialNarrow;
src: local("Arial Narrow");
}
div { font-size:30px; }
.c2 { font-family: myFirstFont2; font-weight: 700; }
.c3 { font-family: Arial Narrow; font-weight: 700; }
<div class="c2">I am Arial Narrow.</div>
<div class="c3">I am Arial Narrow.</div>
My file structure
diary:
diary.html
css
diary.css
sources
fonts
EmblemaOne-Regular.woff
My css code is:
#font-face {
font-family: 'EmblemaOne-Regular';
src: url('../sources/fonts/EmblemaOne-Regular.woff') format('woff');
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
color: #cc6600;
text-decoration: underline;
}
h1 {
font-family: 'EmblemaOne-Regular', sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
The problem is, that this font didnt apply to my h1 title? Can someone explain, why?
Btw I tried to remove quotes, use double quotes, remove "format", use full internet path. Thank you in advance.
I need to embed local .ttf files on a JavaFX project with some variants (bold, italic and so on) but the css parser seems to not support font properties in #font-face declaration:
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-Regular.ttf');
}
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-Bold.ttf');
font-weight: bold;
}
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-ExtraBoldItalic.ttf');
font-style: italic;
}
WARNING: CSS Error parsing
jar:file:/home/test/dist/run736633436/test.jar!/it/test/vending/css/application.css:
Unexpected TOKEN [:] at [8,15] mag 06, 2015 3:40:15 PM
com.sun.javafx.css.parser.CSSParser fontFace WARNING: CSS Error
parsing
jar:file:/home/test/dist/run736633436/test.jar!/it/test/vending/css/application.css:
Unexpected TOKEN [:] at [13,14]
How could I achieve this?
==EDIT==
Notice that the parser complains on font-weight: bold; and font-style: italic; rules.
I think I found a solution. Try to swap the font-weight and font-style attributes with the src attribute. In your case your css would look like:
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('fonts/OpenSans-Regular.ttf');
}
#font-face {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
src: url('fonts/OpenSans-Bold.ttf');
}
#font-face {
font-family: 'Open Sans', sans-serif;
font-style: italic;
src: url('fonts/OpenSans-ExtraBoldItalic.ttf');
}
I had the same issue and swapping the attributes did the job. I have no idea why that is but it seems to resolve the issue.