I am using two fonts from font squirrel for this practice to style some of the my wordpress widget areas:Gothic and Playfair Display. But for some reason,only Playfair is being applyed and Gothic is being ignored.
Because its wordpress widget areas I cant actually display the html but basically the following is the CSS code which again works for one type font only:
CSS:
#font-face{
font-family: 'Playdisplay';
src: url('font/PlayfairDisplay-Bold.ttf') format('ttf'),
url('font/PlayfairDisplay-BlackItalic.ttf') format('ttf'),
url('font/PlayfairDisplay-BoldItalic.ttf') format('ttf'),
url('font/PlayfairDisplay-Italic.ttf') format('ttf'),
url('PlayfairDisplay-Regular.ttf') format('ttf'),
url('font/PlayfairDisplay-black.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: 'Goth';
src: url('font/GOTHIC.ttf') format('ttf'),
url('font/GOTHICB.ttf') format('ttf'),
url('font/GOTHICBI.ttf') format('ttf'),
url('font/GOTHICI.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
.mainfooter h3{
font-family: Goth, GOTHIC;
}
footer h1,
footer h2,
footer h3{
font-family: Playdisplay, PlayfairDisplay-Bold;
}
How can I use both fonts and apply anywhere in the site?
Try placing your font names in single quotes
.mainfooter h3{
font-family: 'Goth';
}
footer h1,
footer h2,
footer h3{
font-family: 'Playdisplay';
}
Also, you're using relative paths for your font files, check these are correct!
Related
We bought the .otf for various weights (Regular, SemiBold & Bold). But when I include into my Vue project's app.scss with the below syntax only the first font which is mentioned is working. The rest of them are not working.
So as per the below code, I'm only able to use Regular font. But if I move url(../fonts/Gilroy-SemiBold.otf) format("opentype"), as first, I will only be able to use SemiBold.
#font-face {
font-family: "Gilroy";
src: local("Gilroy"),
url(../fonts/Gilroy-Regular.otf) format("opentype"), // font-weight: 400
url(../fonts/Gilroy-SemiBold.otf) format("opentype"), // font-weight: 600
url(../fonts/Gilroy-Bold.otf) format("opentype"); // font-weight: 700
}
body {
overflow-x: hidden;
font-family: 'Gilroy', sans-serif;
font-display: swap;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
color: $text-color;
}
This is very weird, how would I resolve this?
I tried to split the font-face into multiple sections
#font-face {
font-family: "Gilroy";
src: local("Gilroy"),
url(../../static/fonts/Gilroy-Regular.otf) format("opentype");
font-weight: 400;
}
#font-face {
font-family: "Gilroy";
src: local("Gilroy"),
url(../../static/fonts/Gilroy-SemiBold.otf) format("opentype"),
url(../../static/fonts/Gilroy-Bold.otf) format("opentype");
font-weight: 600;
}
#font-face {
font-family: "Gilroy";
src: local("Gilroy"),
url(../../static/fonts/Gilroy-Bold.otf) format("opentype");
font-weight: 700;
}
And it worked like a charam!
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;
}
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)
Hi I have a quick question on use CSS #font-face to create a font family.
Traditionally, I used to setup my CSS fonts like this:
#font-face {
font-family: 'My Font Regular';
src: url('fonts/myfont.ttf');
}
#font-face {
font-family: 'My Font Bold';
src: url('fonts/myfont-bold.ttf');
}
p { font-family: "My Font Regular";}
strong {font-family: "My Font Bold";}
However I've recently discovered that you can do it like this:
#font-face {
font-family: 'My Font';
src: url('fonts/myfont.ttf');
font-style:normal;
font-weight:normal;
}
#font-face {
font-family: 'My Font';
src: url('fonts/myfont-bold.ttf');
font-style:normal;
font-weight:bold;
}
p {
font-family: "My Font" ;
font-style:normal;
font-weight:normal;
}
strong {
font-family: "My Font" ;
font-style:normal;
font-weight:bold;
}
My question is, if I use the second technique in bold for example, will the text still render using the custom .eot or will the browser try to emulate it without the using the actual bold font file?
Thanks
If your font file is a bolded font, it would be redundant to set font-weight: bold and there's no need to declare font-weight: normal since that is the default value. You should also use more than .eot files so you have a fallback for other browsers like the others suggested.
Here is an example of what I use:
#font-face {
font-family: 'Franklin Demi';
src: url('FranklinDemi.eot'),
url('FranklinDemi.ttf') format('truetype'),
url('FranklinDemi.svg#font') format('svg');
}
#font-face {
font-family: 'Franklin Heavy';
src: url('FranklinHeavy.eot'),
url('FranklinHeavy.ttf') format('truetype'),
url('FranklinHeavy.svg#font') format('svg');
}
.sidansTitel{
font-family: 'Franklin Demi';
font-size: 22pt;
color: #8b9ba7;
text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
.sidansTitel b{
font-family: 'Franklin Heavy';
font-weight: normal;
font-style: normal;
}
Setting both font-weight: normal; and font-style: normal; makes the font render well in ie/ff/chrome, without it it looked like crap in Chrome. I believe that it looked like crap in Chrome because it tried to render the bold font in bold, which should be fixed by this.
EDIT: spelling