I want to use a custom font in the header of the pdf file.
Using the font name only works properly on systems where that font exists
Accepts the text inside the body of the font using the following code, but does not work for headers
I do not want to use Google fonts and I want to use my own custom fonts
##font-face {
font-family: 'hpf';
font-style: normal;
font-weight: normal;
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAPAIAA...) format("truetype");
}
* {
font-family: 'hpf' !important;
}
I accomplished this using woff, woff2 and ttf files, but haven't tested it with base64. However, if you can't make it work with base64 format, you can choose to convert to the other formats. If this is the case, you could make use of https://onlinefontconverter.com (please, check this link), or any other conveter you prefer.
Here is a sample HTML file I have tested in my project (to clarify, I just changed the font name I used to MyFont):
<!DOCTYPE html>
<head>
<style>
#font-face { font-family: 'MyFont'; src: url('../../../Content/fonts/MyFont.woff2') format('woff2'),
url('../../../Content/fonts/MyFont.woff') format('woff'),
url('../../../Content/fonts/MyFont.ttf') format('truetype') }
.custom-font-text {
font-family: 'MyFont' !important;
}
</style>
</head>
<div>
Normal text <div class="custom-font-text">Text with custom font</div>
</div>
Please, also pay attention to the URLs, as they're crucial to make this approach work. In my case, font files are stored inside a folder called fonts, which is inside a folder called Content, in project's root folder (/Content/fonts). The final So I have to use "../" each time I want to go backwards from my /Views/Documents/PDF folder, where the header is placed.
EDIT (Base64 testing):
Tested successfully using base64. Here is my code:
#font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAOA...) format('truetype');
}
.custom-font-text {
font-family: 'MyFont' !important;
}
As far as I can see, the only difference with yours is that I'm using simple quotes on format("truetype"), but seems to have no real impact, as it also works with double quotes.
As your problem might be on the base64 encoded data, I would recommend you to generate the base64 using a tool like this:
https://www.fontsquirrel.com/tools/webfont-generator
Checking these options: ttf (as FontFormats), Keep existing (as TrueType Hinting) and Base64 Encode (as CSS) will generate a complete kit to test your font. For your information, please, have in mind that this tool requires to accept an agreeement clause which states that your font is legally eligible for web embedding.
Check this post to read a complete walkthrough to properly generate the kit and more useful info:
https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html
Related
I have some local fonts I want to use in my project. I've read a few tutorials and questions on this, and I'm following the reccomendations I've seen, but my fonts are not showing up properly in the browser. I am using webpack 5. In my webpack config:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(woff|woff2|ttf)$/,
use: {
loader: "url-loader",
},
},
]
}
}
I have a bunch of .tff font files in my src/assets/fonts/ directory. I have a .scss file for global styles. In there, I define the font names and I want to use, and where webpack should find them:
#font-face {
font-family: "InterRegular";
src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterMedium";
src: url("../assets/fonts/Inter-Medium.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterSemiBold";
src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype");
font-display: swap;
}
// etc
I'm fairly sure webpack is finding these, because if I get the path to the file wrong, webpack errors. I then try to apply the font:
html,
body {
font-family: "InterSemiBold", sans-serif;
}
There are no errors, but the font does not get applied to the page. When I look in my network tab, I can see that a font file is indeed being loaded:
But this is clearly not the InterSemiBold font. Regardless of what font I'm using, this strangely-named .tff file always shows this same, seriffed font.
Looking at the computed value of an element, I can see that the browser is reading the "InterSemiBold", sans-serif value of the font family, but still defaulting to Arial:
I have also tried loading in fonts using the file-loader with webpack, but that makes no difference, and many recommend using url-loader instead.
What am I doing wrong here? Why is my font not being loaded in and applied?
Your dev tools screenshot indicates your actual page/app style sheet expects the font-family name to be 'Inter'.
So you don't need different family names for each font-weight
and change your #font-face rules to something like this:
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/Inter-Regular.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../assets/fonts/Inter-Medium.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../assets/fonts/Inter-Bold.ttf') format('truetype')
}
Your #font-face rules should include a font-style value.
For italic styles you would change it to font-style: normal.
The font-url must use the exact file name of a font style (just a note, as some automatic font loaders rename the filenames internally or load updated files directly from Google - resulting in filenames like this "inter-v11-latin-800.ttf").
Since a browser can't automatically tell which intermediate weight would be e.g 'semi-bold' or 'light', you add specific numeric font-weight values which can be used to map all font-weights to different selectors like this:
body{
font-family:Inter;
font-size:16px;
}
.medium{
font-weight:500;
}
.semibold{
font-weight:600;
}
strong, h1, h2,
.button{
font-weight:700;
}
You might also double check your main css – it might also contain a separate #font-face declaration.
If everything is working fine, you should see the .tff files in dev tools just as defined in #font-face urls (e.g. "Inter-Regular.ttf")
Still not working?
Try to open the font via absolute URL in your browser.
Font file connection test example
Provided your compiled folder structure looks something like this:
the final URL is "myapp.com"
the main css is located under URL "myapp.com/css/main.css"
font files are located (at least according to your css/compiling code) in directory URL "myapp.com/assets/fonts/"
the actual font files should be available (downloadable) under URL
"myapp.com/assets/fonts/Inter-Regular.ttf"
If this doesn't work – you need to fix the URLs in your #font-face rule.
This especially important, if assets are copied/assembled during a compiling process to a new directory – so previously paths/URLs might not be "automagically" fixed.
Another cause might be inlined css – so the css becomes part of the compiled HTML <head> or <body> – relative paths/URLs might not work anymore => absolute paths could fix this (... albeit, any decent auto inlining script should be smart enough to translate relative to absolute URLs).
Compiled css
The final css might also include some overriding rules.
So check the finally compiled css in devtools and search for any #font-face rules – as a last resort: add a !important keyword to a font src to enforce the desired URL.
Font files might be corrupt?
Since the "inter" is available as free google webfont you could get a "fresh" copy via google webfonts helper
I was having the same problem as you with Webpack 5 and a custom local font, none of the above suggestions worked, but I just solved it, here's how: When I went to Google Fonts the only option was to download a TTF and that's what I had been trying to use. So, I visited the google-webfonts-helper website which gives you the code to put in your CSS file to make sure I was doing it correctly, and it instead had me download a WOFF and WOFF2 of the font. When I used these files the fonts rendered properly in my Chrome browser right away. I then found a few other forums from the past where people had issues with Chrome rendering TTF's and solved them by switching to WOFF formats. I don't know exactly why this works but it did.
I have a .ttf file for my website but this file has regular and bold in the same file.
How I can select regular or bold at .ttf file with CSS?
Currently I manage the fonts on this way in my CSS file:
#font-face {
font-family: Bangla MN;
src: url("../fonts/Bangla MN.ttf");
}
Or is there a way to separate regular and bold from a .ttf file to two files .ttf?
Thanks in advance
It's not a ttc, so it doesn't. But, you probably do have two separate files on disk that declare themselves as being the same font family, and the OS and quite a few desktop applications will happily treat them as one "font" for the purpose of user selection and then swap resources under the hood when you pick normal/italic/bold/etc.
CSS is nothing like that, it needs you to tell it what to do, and each distinct font needs its own binding:
#font-face {
font-family: Bangla;
src: url("../fonts/Bangla MN.ttf") format("truetype");
font-weight: normal;
}
#font-face {
font-family: Bangla;
src: url("../fonts/Bangla MN Bold.ttf") format("truetype");
font-weight: bold;
}
And now you have one font-family that will switch file resource depending on whether you're using font-family: Bangla; font-weight:normal in some bit of real site CSS, or font-family: Bangla; font-weight: bold. However, let's not end it there: ttf are universal fonts, and some browsers (notable IE) will be much more anal about loading it due to installation permissions than if you convert it to WOFF and serve that instead. So if you have the rights to use this font, and its license permits WOFF conversion, that's entirely worth doing.
I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine.
Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far:
Pick fonts on Google Web Fonts and download them.
Use Font Squirrel Webfont Generator to convert downloaded TTF files to CSS file with base64 embedded WOFF fonts (Expert options -> CSS -> Base64 Encode).
Load CSS file async (not important here).
CSS snippet for Open Sans Bold:
#font-face {
font-family: 'Open Sans';
src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff');
font-weight: 700;
font-style: normal;
}
The problem is, that converted fonts look a lot different. Take a look at Open Sans Bold:
Especially notice accents being way off and absolutely horrible letter a. Other font families and variants look very noticeably different as well (size and shape distortions, etc.).
So the question is: How do you properly encode TTF files from Google Web Fonts (or other source) to base64 format and use it in a way that the result is identical to the original file?
In the Font Squirrel Expert options, make sure to set the 'TrueType Hinting' option to 'Keep Existing'. Either of the other options will cause the TrueType instructions (hints) to be modified, which will in turn affect the rendering of the font.
Alternatively, if you're happy with the rendering of the font directly from GWF, you can just take that file and do the base64 encoding yourself. In OS X or Linux, use the built-in base64 command in Terminal/shell:
$ base64 myfont.ttf > fontbase64.txt
For Windows, you'll need to download a program to encode in base64 (there are several free/Open Source tools available). Copy the contents of that file, then use in your CSS as:
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
(Note that you may need to make some adjustments to the various #font-face info to match your particular font data; this is just an example template)
Use this code snippet to base64 encode your font directly in the browser (OS independent, no need to install anything)
function base64convert (files) {
console.clear()
const reader = new FileReader()
reader.onload = (e) => {
console.log(e.target.result)
}
reader.readAsDataURL(files[0])
}
<input type="file" onchange="base64convert(this.files)">
Then copy the output and paste it into your CSS:
#font-face {
font-family: 'myfont';
src: url("<<copied base64 string>>");
}
A much simpler way to get the base64 code for Google Fonts is to use the following tool:
https://amio.github.io/embedded-google-fonts/
input the URL to your font and you get the base64 code back straight away :)
I am trying to embed a font file to my tumblr blog using #font-face and Font Squirrel kit, but so far I had no luck. I also used base64 encoding for embedding the font, but neither in Safari nor Firefox I cannot get it to work.
Edit: Uploading files and using them to tumblr's static area works in Safari and for Latin script. The font I am trying to use includes characters from Old Turkic script, and I cannot get these to work. Any advice regarding the complex scripts would be appreciated.
My code is below:
#font-face {
font-family: 'orkunregular';
src: url('http://static.tumblr.com/gaobkbe/d1rn63eux/orkun-regular-webfont.eot');
}
#font-face {
font-family: 'orkunregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'),
url('http://static.tumblr.com/gaobkbe/xtgn63ewo/orkun-regular-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/gaobkbe/nZcn63ey6/orkun-regular-webfont.svg#orkunregular') format('svg');
font-weight: normal;
font-style: normal;
}
How to proceed from now on?
Don't try to store and serve the font files on tumblr itself. This is likely not permitted by Tumblr TOS.
Put the font files somewhere else and it will work.
What you have done so far is, you defined the font-family. That will not make the browser use it.
Add this to your current custom css.
section.post {
font-family: "orkunregular";
}
You need to apply that Font to the HTML-Elements you want to use it on.
section.post would be only your own blogposts.
if you want everything to use that font, try:
* {
font-family: "orkunregular" !important;
}
Please check the TOS of Tumblr if they allow that kind of customization, or atleast host those Fonts on a seperate webserver.
Okay, I've solved it. When generating the font kit, I chose the Unicode range of the Old Turkic script, then when used the new kit, it displayed without any problems.
Here's the blog page, http://bitigchi.tumblr.com/indiriler1
Thanks for all the answers.
I want to download Google web-fonts in all formats and create a combined CSS to use them anywhere without loading them from Google servers.
I already have a php script that downloads the font files. Need only the CSS now.
As you may know the Google web-font API serves a special CSS depending on the browsers user agent.
I have a few questions about it.
Is it true that Google web-fonts get only serve one font as svg for only OS devices, I noticed this while testing a few fonts (with faked user agent). While for others there are multiple #font-face declarations but with font-weight and font-style different. Am I right to assume Google serves the SVG only for the "regular" version of the fonts not "italic, bold, book ..."
Whats the best way to combine them into one CSS, especially in regards to this combined SVG font.
You are right that Google only serves up the font for your specific user-agent. Getting them all is tricky.
You mentioned you have a PHP script for fetching the different font formats, so you may not need these two options, but I'll list them anyway:
Option 1
This article walks through the process of how to download all the different formats:
http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html
In short, you'll need to use user-agent spoofing to grab all the different formats.
Option 2
Another option would be just to grab the TTF version (since that's easy) and then head over to http://www.fontsquirrel.com/tools/webfont-generator to have them convert/generate all the other versions.
If you end up using this option, it may be useful to know that Joe Maller has put together a full download package to grab all of the TTF font files at once (though it might be a bit out of date).
Serving up with CSS
Once you have all the different versions, use a syntax like this for your CSS. This is from FontSpring's Bulletproof Font-Face Syntax.
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
That last line of course depends on whether you have an SVG font file. Which brings us to...
SVG
That first link claims:
While it's true that Google serves the SVG font format on iOS devices running version 4.2 or below, I can confirm that the SVGs are empty or broken. It's therefore true that Google no longer supports devices running iOS versions 4.2 and below. Implies, no SVG font format anymore.
I haven't been able to verify this anywhere else, however I have seen a whole lot of users complaining about SVG issues, fonts not loading... I would be inclined to ignore SVG as an option, and focus on serving up EOT/WOFF/TTF. That seems to be the most solid way of covering your bases.
Update: it appears that fontsquirrel.com can generate an SVG version. So even though Google doesn't provide SVG as a download option, you can still generate it if you really want to.
You can use base64 encoding, but it is about 30% larger than normal files (and I don't know if this url will be parsed every time you write something, so please, check it before you use it).
Or you can download it once and save it in local-browser memory and use it without downloading new version (but you still need to download these files at least one time).
With IE i can't help you. But when you're creating new #font-face rule, you can specify font-weight.
/** #1 **/
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Extrabold'),
local('OpenSans-Extrabold'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff)
format('woff');
}
/** #2 **/
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'),
local('OpenSansLight-Italic'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff)
format('woff');
}
.a {
font-family: 'Open Sans';
font-weight: 300; /** #2 used for <= 500 cos font-weights are 300 and 600 **/
}
.b {
font-family: 'Open Sans';
font-weight: 800; /** #1 used for >= 600 **/
}
Hope it'll help u.