I am trying to import a font that I downloaded to my code using #font-face, the text is reading right however it's bypassing the downloaded font in my font family and going straight to the backup font, "Cursive". I don't know why this is happening because I've triple checked that it is linked to the right folder. Please let me know any thoughts you might have. Thanks.
enter image description here
#font-face usage
With the #font-face rule,you do not have to use one of the "web-safe" fonts anymore like font-family:'Poppins','serif'.The will be Stored as a Local font like font-family : Times New Roman,serif
In the #font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) defined in the font-family property:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Related
I have an icon element which is defined as
<span class="sap-icon icon-locked"></span>
.sap-icon:before {
font-family: "SAP-icons";
}
.icon-locked {
content: "\e153";
}
I want to check where the custom font "SAP-icons" is defined.
I have removed all font face in my code, but the icon still exists.
#font-face {
font-family: "SAP-icons";
src: font-url("SAP-icons.woff2") format("woff2");
}
Is there a way to list the #font-face of "SAP-icons"?
I can list font using window.getComputedStyle(temp1,':before').font:
Is there anything like window.getComputedStyle(temp1,':before').font-face?
Also, I have checked the Computed CSS in chrome dev tools, no information for font face, so how do I know where this icon font is defined?
There is a fonts tab in firefox devtools that list #font-face rule. https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/index.html#the-fonts-tab
You can use fontFamily instead of font-family in JavaScript, to see where the icon font is defined.
Like this:
console.log(window.getComputedStyle(temp1,':before').fontFamily);
// SAP-icons
I found a gorgeous font called Slim Joe on a webpage whose link I posted below.
Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.
Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.
The webpage where it's included:
http://presentation.creative-tim.com/ (where it says "creative tim")
How the font looks like:
https://befonts.com/big-john-slim-joe-font.html
You can include fonts into your website by css #font-face rule.
This requires having either the otf or ttf font file on your server.
To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.
Declare it like
#font-face {
font-family: john-slim-joe;
src: url(myFontsFolder/john-slim-joe.ttf);
}
Use it like
p{
font-family: john-slim-joe;
}
To add a font to your website:
Locate the CSS file.
Create or locate your fonts folder.
Use the CSS's #font-face property to add your font file via url. This is also where you will name your font. Here's an example to follow from W3School.com's CSS #font-face Rule
After that, you can use the "font-family" property.
Hope this helps!
The website you are referring (http://presentation.creative-tim.com/) has imported the font files from given directory. Take Look at the Html header and you will find the following line:
<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
On this file, you can see how they imported and declared Slim-Joe font.
#font-face {
font-family: 'Slim-Joe';
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
font-weight: normal;
font-style: normal;
}
And usage by the nav bar css:
.navbar .navbar-brand {
font-weight: 600;
margin: 5px 0px;
padding: 20px 15px;
font-size: 20px;
font-family: "Slim-Joe";
letter-spacing: 0;
}
My website uses a font that Google Fonts does not have, so I used "#font-face". which looked like this.
#font-face {
font-family: 'Font';
src: local(example.ttc);
}
This method worked and my font that I uploaded was displayed. The only problem is that the font I'm using has 2 styles (inline and solid) and I don't know how to specify it (there is only one .ttc file for both styles). I tried font-style: solid and font-family: 'Font Solid'; and many other ways but none of them worked. Does anybody know how to specify only one style? Thanks!
PS- I replaced "Font" and "example.ttc" with their actual names in my real code.
PPS- Sorry if my question is vague or too specific. Just tell me and I'll clear it up.
I have the following in my css and the font won't change to what I want it to become.
body{
background-color:#a8a7a7;
color:#C50909;
font-family: main, Calibri;
text-align:center;
}
#font-face{
font-family: main;
src: url('fonts/RegencieLight.ttf');
}
and my css properly links into my html because all of the other css aspects will still be applied. If anyone could help me that would be great. Thanks.
You must provide a string as the font-family name like this
font-family: "main";
so that you can reference it in other places like this
font-family: "main", Calibri
Check out: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Either
the path is wrong or
depending on the browser and operating system it could not like the font format
Either way I recommend reading Paul Irish's bullet proof #font-face syntax and using Font Squirrel's #font-face generator/packager The packager will take a font and create each format that a web client might need so it will work on all systems.
I'm trying to simply embed a font that I have uploaded to my server.
Everything is being loaded correctly, but the wrong font is being displayed. I know this is happening because when I remove the #font-face code the rendered HTML font changes.
Here's my code, I've played around with so many different things in the last hour so shout out whatever you think might work. I've also tried .TTF files.
#font-face {
font-family: Joan;
src: url("../fonts/joan.otf") format('font/opentype');
}
body {
background: url('../images/bg.gif');
font-family: Joan;
}
http://www.fontsquirrel.com/fontface/generator
Wins for me so far in my related adventures.
Here's a website I'm developing with it as we speak: http://bigballoon.businesscatalyst.com/
You may have to put the font name in quotes. Also, for MSIE compatibility, you'll need to convert the font to .eot format. Here's "bulletproof" #font-face as per paulirish.com. You may need to adjust depending on full/postscript font name:
#font-face {
font-family: 'Joan';
src: url('../fonts/joan.eot');
src: local('Joan Regular'), local('Joan'),
url('../fonts/joan.otf') format('opentype');
}