I am trying to use a custom font for the headings on my site but I cannot get it to work. It is just displaying as default Times New Roman or something no matter what I try. Does anyone have any advice about what I can do to get this font to show?
<style>
#font-face {
font-family:"volcano";
src: url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.ttf") format ("truetype"),
url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.woff") format ("woff");
}
h1 {
font-family: "volcano";
}
</style>
Looks like there's a missing :
Try this
<style>
#font-face {
font-family:"volcano";
src: url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.ttf" format ("truetype"),
url("/wp-content/themes/wp-bootstrap-4/assets/fonts/Volcano-King.woff" format ("woff");
}
h1 {
font-family: "volcano";
}
</style>
h1 {
font-family: "volcano";
}
add a colon between property-name and property-value
Related
The body should display a handwriting font but will only do so if the comment line is uncommented.
It seems I cannot use custom properties in #font-face? Tested on FF and Chrome.
What's going on here?
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: 'Indie Flower';
}
#font-face {
font-family: var(--fontName);
/* font-family: 'Indie Flower'; */
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: var(--fontName);
}
<p>Custom CSS properties don't work inside #font-face rule?</p>
Your original suspicion that CSS properties don't work inside #font-face is accurate. The accepted answer is incorrect and only appears to work because of a mistake (see below).
I checked in Firefox, Chrome, and Safari, and none of them accept a #font-face in which a descriptor includes a var() function. Firefox developer edition was particularly helpful, since it let me see that the #font-face rule isn't being parsed at all with font-family: var(--fontName);
I also tried using a custom property for the src descriptor, which also failed.
As far as I can tell, the CSS #font-face specification says nothing about whether custom properties should work or not. No browser has chosen to make them work. This makes considerable sense, as a single font family's source file and properties are not likely to be variable.
If you have to dynamically construct #font-face rules client-side, the best method is using the FontFace API in a script. If absolutely necessary you could even read from your CSS properties with getComputedStyle(document.body).getPropertyValue("--fontName").
The accepted answer only seems to work because it redefines the font family name in #font-face, setting it to a string with the literal value of 'var(--fontName)'. It also sets the body font-family: 'var(--fontName)'. The two strings match, so the font loads.
CSS functions like var() are NEVER evaluated inside of a string. Everything between the opening and closing quotes is evaluated literally, as this diagram from the CSS syntax spec shows. So #disinfor's code isn't referencing the --fontName: "Indie Flower"; set on :root at all.
As a demonstration, see what happens when we unquote the font-family on body, so it actually evaluates the var(). The "Indie Flower" font doesn't exist in the document, so it doesn't load, but a font named "var(--fontName)" does exist, and will load:
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: "Indie Flower";
}
#font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: var(--fontName);
}
.use-the-string {
font-family: 'var(--fontName)';
}
<p>This tries to use "Indie Flower", but it doesn't exist.</p>
<p class="use-the-string">This uses the font named "var(--fontName)"</p>
The problem is how the font-name is actually output for the browser to read. Remove the quote marks for the root var, and add them around the call to the variable.
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: Indie Flower;
}
#font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: 'var(--fontName)';
}
<p>Custom CSS properties don't work inside #font-face rule?</p>
Edit
Here's the version with a fallback.
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: "Indie Flower";
--fallBack: sans-serif;
--fullFont: 'var(--fontName)', var(--fallBack);
}
#font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: 'var(--fontName)', var(--fallBack);
}
p {
font-family: var(--fullFont);
}
<p>Custom CSS properties don't work inside #font-face rule?</p>
I want to set a global font with CSS in one of my projects.
What I have tried is the following:
#font-face {
font-family: HoftypeLight;
src: Valid URL;
}
* {
font-family: HoftypeLight;
}
but it seems not to work.
I know that I properly get the font because I have tried to add to one of my texts this class:
.test {
font-family: HoftypeLight;
}
and it works.
Hello I think use like this
body {
font-family: Algerian;
}
font same for in all project within the body tag.
So I'm trying to change the default breadcrumb style with SASS. I've setup everything as mentioned in the official Bootstrap 4 beta 3 docs. I've changed the following in the custom.scss
$breadcrumb-divider: "\f105"; //fontawesome icon for fa-angle-right
Now this also needs font family to set to
font-family: 'fontAwesome'; //How do I plug this in
How do you setup the font for the .breadcrumb-item::before class in the right way?
Try this:
.breadcrumb-item::before {
font-family: 'FontAwesome';
content: "\f105";
}
The actual tag as listed in breadcrumb.scss is:
.breadcrumb-item + .breadcrumb-item::before {
font-family: 'FontAwesome';
content: "\f101" !important;
}
The !important should overwrite the standard styling set.
I hope this helps.
If you are using Bootstrap 4 and Font Awesome 5,
.breadcrumb-item + .breadcrumb-item::before {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
}
you are defining a variable for the scss like:
$breadcrumb-divider: "\f105";
now you have to set this variable in the pseudo-element ::before content property. and also apply the font shorthand property to it.
.breadcrumb-item+.breadcrumb-item::before{
font: normal normal normal 14px/1 FontAwesome;
content: $breadcrumb-divider;
}
I think it should be work please try it.
Thank you.
2020 - Google brought me here for something similar.
To change the separator from the standard "/" to ">>" without using an icon library or messing with a svg, here is the css snippet which can be applied via a custom class 'breadcrumb-custom' on
the 'ol' tag.
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
content: ">>";
font-weight: bold;
color: #000000;
}
This may be a bit late to the party, but I wanted to give an updated answer for current library versions.
If you are using Bootstrap 5 and FontAwesome 5, this SCSS will work.
.breadcrumb-item {
+ .breadcrumb-item {
&::before {
font-family: "Font Awesome 5 Free";
font-weight: 700;
content: "\f054" !important;
}
}
}
I've set bootstrap wysiwyg inside a popover. Here's the DEMO. Now if I add this:
* { font-weight: bold; }
#editor { font-weight: normal; }
It screwes up the bold directive entirely. Check it out. I tried #editor *, .popover * and other variations but nothing helps. Any ideas?
My current solution for this is instead of this:
* { font-weight: bold; }
to do this:
html { font-weight: bold; }
It might require me some extra work down the road, but it solves my problem.
DEMO
I've done as much searching around on Google and on here as I possibly could before posting so please excuse me if this is easy to answer. Perhaps it's just late where I am, I don't know.
The site is http://artofbackpacking.com
No matter what I do, the web fonts on the top right are not loading. You'll see that I have e001, e002, etc. They work in my development environment but not on my live site. The font is from icomoon.io and I used the CSS that was suggested on there. I also tried the Base64 code but that didn't work either.
Here's a small part of what I got in my CSS for this.
#font-face {
font-family: 'socialFontsMichael';
src:url('../wp-content/fonts/socialFontsMichael.eot');
src:url('../wp-content/fonts/socialFontsMichael.eot?#iefix') format('embedded-opentype'),
url('../wp-content/fonts/socialFontsMichael.woff') format('woff'),
url('../wp-content/fonts/socialFontsMichael.ttf') format('truetype'),
url('../wp-content/fonts/socialFontsMichael.svg#socialFontsMichael') format('svg');
font-weight: normal;
font-style: normal;
}
Appreciate the help.
You forgot to put \ before e000, try this:
.social-feed:before {
content: "\e000";
background: #FF6600;
}
.social-feed:before hover {
content: "\e000";
background: #000;
}
.social-twitter:before {
content: "\e001";
background: #00aced;
}
.social-facebook:before {
content: "\e002";
background: #3b579d;
}
.social-instagram:before {
content: "\e003";
background: #dbd2c3;
}
.social-pinterest:before {
content: "\e004";
}
.social-google-plus:before {
content: "\e005";
background: #c12026;
}
.social-youtube:before {
content: "\e006";
background: #ff3333;
}
How to use icon fonts: http://gomakethings.com/icon-fonts/
It looks like you have your paths incorrect I'm getting 404's on your font url's. Try just using "/wp-content/fonts/socialFontsMichael.woff' for example. That seems to be a valid url to me.
You have a problem with files name (uppercase) or folders permission:
Console errors:
Try to change the permission of "fonts" folder, or maybe the cause is the fonts files names with uppercase "socialFontsMichael", change it to lowercase like "socialfontsmichael".