I am trying to embed base64-encoded font in the #font-face rule in the style in document's head.
<style>
#font-face {
font-family: OmoType-BoldStdTwo;
src: url(data:font/ttf;base64,<base64data>);
}
div {
font-family: OmoType-BoldStdTwo;
font-feature-settings: "ss03" 1, "ss04" 1;
}
</style>
For some reason, it's not using my font, but Times (I see that when I look at the computed styles in Web inspector). I am testing on Google Chrome.
Here's the fiddle: https://jsfiddle.net/gfwdzx5s/
It looks like there was an issue with the font itself. I loaded the content of the font as a text and then base64encoded it, and that doesn't work, but when I loaded it as an array buffer and then converted to base64, it worked.
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 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 work with a system that can use an email template to make and send an email, and I face a problem while trying to attach local font (any type) to email.
I attach a font with #font-face in in this way (prerendered HTML):
<style>
#font-face {
font-family: "Pacifico";
src: url("../resources/Pacifico.ttf");
}
body, span, div, input[type=text], label {
font-family: 'Pacifico' !important;
color:red;
}
</style>
After rendering, ready to send HTML page contains an appropriate link to the font (I can download font successfully as a font (content type is correct) from Tomcat server localhost:8080/.../font) and it is uploaded properly. However, the page doesn't implement it and the font itself isn't represented as it should (seems like default font is used).
This problem relates exclusively to locally stored fonts - if I use any CDN email is rendered properly.
The font is 100% workable since when I create a dummy HTML page and attach font (with a direct link to a folder) there it is applied correctly.
Edit
May this issue to connected to the inequality of content types for fonts in Tomcat and my application (application/x-font-ttf in Tomcat for .ttf fonts VS font/ttf in application)?
Edit 2
Rendered HTML contains this snippet
<style>
#font-face {
font-family: "Pacifico";
src: url("http://localhost:8080/path/to/resource/Pacifico.ttf");
}
body, span, div, input[type=text], label {
font-family: 'Pacifico' !important;
color:red;
}
</style>
The relative URL will be relative to the location of the CSS.
Which appears to be inline in the email, which does not have a URL. So a relative URL has nothing to be relative to.
I assume when using a CDN you'll have an absolute URL: you'll need one for each non-embedded resources,
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');
}