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
Related
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;
}
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;
}
I changed the font of a paragraph using the span tag. The font is available on my computer but I don't know if it will be available on the PCs which don't have the font. If it doesn't, is there a way to make it available for them without them having to download it?
No they won't. The font have to be on the website server. You can you the google font to do want you want and make them available everywhere. https://www.google.com/fonts
And use the font-face CSS rule :
#font-face {
font-family: myFirstFont; /* give a name to your font */
src: url(myFileFontFile); /* select the font file */
}
.my-class {
font-family: myFirstFont; /* apply the font to your div or span or whatever */
}
I'm trying to use my owns icons instead of images on my site but when I load icons from Fontastic or Iconmoon it doesn't work neither in chrome or safari, do I need a bootstrap or there is a mistake in my code?
This is the CSS from Fontastic
#font-face {
font-family: "untitled-font-1";
src:url("untitled-font-1.eot");
src:url("untitled-font-1.eot?#iefix") format("embedded-opentype"),
url("untitled-font-1.woff") format("woff"),
url("untitled-font-1.ttf") format("truetype"),
url("untitled-font-1.svg#untitled-font-1") format("svg");
font-weight: normal;
font-style: normal;
}
and how i tried to call the icon
<i class="icon-closeicon"></i>
When adding a custom icon font (such as something from icomoon) you have to do a few things.
Import the font with #font-face
Make sure you are importing the necessary css rules (ex. .icon-location:before {content: "\e947";})
Make sure your elements have the proper font-family value (the icon font you just loaded)
Make sure your elements have the correct .class name (the name of the icon you wish to call)
I have a suspicion that you are missing one of these steps (especially considering you didn't link the code in your question).
Here is an example fiddle of how a complete import of an icon font should look.
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');
}