I'm trying to use Circular font, but for some reason it falls back on "arial"
Here's my
fonts.css file:
/* Light Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Light.eot");
src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
font-weight: 300;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Light.eot");
src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
font-style: italic;
font-weight: 300;
}
/* End Light Font */
/* Normal Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Book.eot");
src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
font-weight: 400;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Book.eot");
src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
font-style: italic;
font-weight: 400;
}
/* End Normal Font */
/* Medium Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Medium.eot");
src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
font-weight: 500;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Medium.eot");
src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
font-style: italic;
font-weight: 500;
}
/* End Medium Font */
/* Bold Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Bold.eot");
src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
font-weight: 700;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Bold.eot");
src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
font-style: italic;
font-weight: 700;
}
/* End Bold Font */
/* Black Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Black.eot");
src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
font-weight: 900;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Black.eot");
src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
font-weight: 900;
font-style: italic;
}
/* End Black Font */
Here's my SASS to use the font:
$font-family-primary: "CircularWeb", Arial, sans-serif;
#media print {
body, html {
font-family: "CircularWeb", Arial, sans-serif;
}
}
*,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "CircularWeb", Arial, sans-serif;
}
I've tried multiple different methods for this, but nothing seems to work. Maybe I did them wrong, so I'm open to any and all suggestions. My compiled CSS directory: root/css. My fonts directory: root/fonts
If I go to: mysite.com/fonts/Circular/CircularWeb-Light.eot it saves the font, so I know I'm using the right directory. Any help would be greatly appreciated. (I've never added a font from a local directory only from fonts.google)
Troubleshooting steps:
test it online
try a different font
attempt with one font-face declaration
double check the font file path
check in the dev tool (f12 in Chrome) to see that the font is being declared on the elements you declared
Related
I want to use a custom font in my project so I used #font-face in glabal.css:
// Black
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
// ExtraBold
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-ExtraBlold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: "nunito";
src: url('/public/fonts/nunito/Nunito-ExtraBloldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
...
I have a component in /component/Card/Card.tsx with its custom CSS /component/Card/Card.module.css, I want to use my font in my Card.module.css, but it is not working.
Do you have an idea of where I should put my #font-faced to be able to use it in my whole project?
I'm trying to use the following CSS that adds a font family with six different font-weights.
#font-face { font-family: myFont; font-weight: Thin; src: url('../fonts/myFont-Thin.ttf'); }
#font-face { font-family: myFont; font-weight: Light; src: url('../fonts/myFont-Light.ttf'); }
#font-face { font-family: myFont; font-weight: Medium; src: url('../fonts/myFont-Medium.ttf'); }
#font-face { font-family: myFont; font-weight: Regular; src: url('../fonts/myFont-Regular.ttf'); }
#font-face { font-family: myFont; font-weight: Bold; src: url('../fonts/myFont-Bold.ttf'); }
#font-face { font-family: myFont; font-weight: Black; src: url('../fonts/myFont-Black.ttf'); }
.myClass{
font-family: myFont, sans-serif;
font-weight: Medium;
}
When I try to use the class myClass, it uses the myFont-Bold.ttf with a font-weight of 400 instead of using the myFont-Medium.ttf with a font-weight of 400. Inside of the developer tools, I'm able to see it's only loaded two font-weights of my font: Bold and Black. When I delete the line for the black font-weight, it then loads in Regular and Bold. Why is it only loading two font-weights instead of all of them?
You're using invalid font-weight keywords. (See MDN: font-weight)
Style names like "light" or "medium" are commonly used in desktop environments (e.g using a graphic application) – these style names are actually stored in a font file (at least in formats like truetype/ttf).
However, browsers can't use these internally stored style names and need an explicit style/weight mapping like so:
#font-face {
font-family: myFont;
font-weight: 100;
font-style: normal;
src: url("../fonts/myFont-Thin.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 300;
font-style: normal;
src: url("../fonts/myFont-Light.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 500;
font-style: normal;
src: url("../fonts/myFont-Medium.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 400;
font-style: normal;
src: url("../fonts/myFont-Regular.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 700;
font-style: normal;
src: url("../fonts/myFont-Bold.ttf") format('truetype');
}
#font-face {
font-family: myFont;
font-weight: 900;
font-style: normal;
src: url("../fonts/myFont-Black.ttf") format('truetype');
}
body {
font-family: myFont, sans-serif;
}
.thin {
font-weight: 100;
}
.medium {
font-weight: 500;
}
.black {
font-weight: 900;
}
I strongly recommend using numeric font-weight values for better compatibility as well as specifying the format like format('truetype')
You should also include a font-style to map normal and italic styles.
Hy,
I have a little problem.
I put the font in assets/fonts/barcode.ttf
I use the next code
#font-face {
font-family: "barcode font";
src: url(assets/fonts/barcode.ttf) format("truetype");
src: url(assets/fonts/barcode.svg) format('svg');
src: url(assets/fonts/barcode.eot);
src: url(assets/fonts/barcode.woff);
src: url(assets/fonts/barcode.woff2);
}
.classname {
font-family: 'barcode font';
}
p.codbare {
font-family: 'barcode font';
font-weight: normal;
font-style: normal;
font-size: 80px;
}
but is not working. Is not showing the font when I add a text.
I have a _fonts.scss file in my app with the code shown below. When trying to see if the font-weight 400 applies, nothing happens. However, font-weights like 300, 500 and 900 work. I tried to find a solution but to no avail. What could be causing this?
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Regular.otf") format("opentype");
font-weight: 400;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Semibold.otf") format("opentype");
font-weight: 500;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Bold.otf") format("opentype");
font-weight: bold;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Light.otf") format("opentype");
font-weight: 300;
}
#font-face {
font-family: ProximaNova;
src: url("../fonts/ProximaNova-Thin.otf") format("opentype");
font-weight: lighter;
}
[UPDATE]
It seems ProximaNova-Thin always replaces ProximaNova-Regular when seen in the Fonts tab of Chrome's dev tools. Why can't I keep both?
Here's the top of my style sheet:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body{
font-family:"Open Sans";
background-image:url(images/greyFadeBG.jpg);
background-repeat:repeat-x;
background-color:#ffffff;
margin:0px;
padding:0px;
height:100%;
min-width:870px;
font-size:14px;
color:#666666;
}
This displays the custom font in IE(9 and 10)
If I change the line from font-family:"Open Sans"; to font-family:"Open Sans", sans-serif;
The custom font will show in IE7, but all IE version will show the san-serif font.
I've tried this from Font Squirrel with no luck:
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any ideas?
for the second #font-face to work you'll need to change the body font-family to
body{
font-family: "open_sansregular";
}
or better yet
body{
font-family: "Open Sans", "open_sansregular", sans-serif;
}