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!
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;
}
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;
}
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!
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/
Super easy question, I expect. I'm trying to upload my custom font to the server, like so:
custom.css.scss
p, ol, li, a, td, ul, h1, h2, h3, h4, h5, h6, label {
font-family: rockwell;
src: url('/assets/Rockwell.TTF');
text-align: left;
em {
font-family: rockwell;
font-style: italic;
src: url('/assets/RockwellItalic.TTF');
}
strong {
font-family: rockwell;
font-weight: bold;
src: url('/assets/RockwellBold.TTF');
}
}
I've tried putting those three TTF files both directly in app/assets (current attempt), and in app/assets/stylesheets. When I did the latter, I tried the src url as both /stylesheets/Rockwell.ttf and /app/assets/stylesheets/Rockwell.ttf.
None of these have actually worked. when my friend loads the site up in his browser, it's in another font. Any idea what I'm doing wrong? / How to fix it? If this is CSS3-only, how do I ensure I'm using CSS3?
EDIT -- I've been trying to figure out whether the app is having trouble finding the font file, so I've checked the network/fonts tab of inspect element. Whether or not I provide a real path (I've tried /stylesheetsRockwell.ttf by mistake), nothing shows up there at all.
EDIT -- possible way to wrap in bold and italic?
#font-face {
font-family: 'Rockwell';
src: url('<%= asset_path("Rockwell.ttf") %>');
font-weight: normal;
font-style: normal;
strong {
src: url('<%= asset_path("RockwellBold.ttf") %>');
}
em {
src: url('<%= asset_path("RockwellItalic.ttf") %>');
}
}
What worked for me:
I added the fonts to a new assets/fonts/ directory, then added that to the assets path
config/application.rb
config.assets.paths << "#{Rails.root}/app/assets/fonts"
Then I declared a bunch of font-faces, which I individually assigned to items I wanted normal, bold, and italic:
typography.css.erb.scss
/* font families */
#font-face {
font-family: 'Rockwell';
src: url('<%= asset_path("Rockwell.ttf") %>');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Rockwell Italic';
src: url('<%= asset_path("RockwellItalic.ttf") %>');
}
#font-face {
font-family: 'Rockwell Bold';
src: url('<%= asset_path("RockwellBold.ttf") %>');
}
p, ol, small, ul, li, td, th, h3, h4, h5 ,h6, label {
font-family: Rockwell; # The elements I wanted defaulted to normal
}
h1, h2, a, strong {
font-family: 'Rockwell Bold'; # The elements I wanted defaulted to bold
}
li {
small {
font-family: 'Rockwell Bold'; # Subset I wanted defaulted bold
}
}
em {
font-family: 'Rockwell Italic'; # Manual italic
}
# Whenever I wanted italic or bold, I did it through font-family for consistency.
This meant turning all css files into css.erb.scss files, so they understand "<%= asset_path"
In a Rails project, I strucutre the fonts as i do with stylesheets or images :
style/stylesheet/myStyle.css
style/images/myImage.jpg
style/fonts/myFont.ttf