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.
Related
I have a custom icon font (generated with Icomoon).
body {
--pseudo-element-content: '\e900';
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
}
However, when doing this, my pseudo element doesn't appear in my browser (as if it didn't have any content). It looks like my css variable has the icon value interpreted and not its code.
If I change it to
div::before {
font-family: 'CustomFont';
content: '\e900';
}
it works like a charm. I tried a few tricks (string concat, adding ' and escaping them) but it didn't work.
I've tried it and it work with another character (see the snippet).
It seems that you don't have that font on your OS and the browser can't render it.
body {
--pseudo-element-content: "\016E";
}
div::before {
font-family: "CustomFont";
content: var(--pseudo-element-content);
}
<div><-- </div>
CSS variables are placed in the rules, not at the top level:
selector {
padding: 100px;
--some-var: 'abcdef'
}
Variables are inherited like the ordinary CSS rules.
If you want the variable to be visible everywhere, add it to html (or :root):
html {
--pseudo-element-content: '\e900';
}
Answer to edited question:
You are trying to place the styles inside each over, which is not supported in CSS. Perhaps, originally code was for CSS preprocessor - SASS.
The fix:
body {
--pseudo-element-content: '\e900';
}
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
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
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>
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;
}
}
}
Hilfe
how can i set the text-style
Inline solution:
Hilfe
A better solution would be to use a separarate stylesheet or <style>...</style> block so that you can reuse styles for multiple elements:
<style>
a { font-family: Arial; } /* this is valid for all links */
a.help { font-family: Arial; } /* this is valid links with class="help" */
<style>
...
Hilfe
For an introduction to CSS/stylesheets, have a look at this tutorial.
Specify the font style in the style tag as below-
< href ="javascript:NewWindow =window.open('anleitung.aspx', 'NewWindow' , ' top=81, left=499, width=400, height=400'); NewWindow.focus()" style="font-family:Arial">Hilfe