We Keep Coding

How to Cache Custom Non-Google Font in Blogger Blog?

I want to use custom non google font like that:
#font-face {
font-family: 'Hacen Liner Printout Lt';
src: url('https://dl.dropbox.com/s/7nbaxeic1c68ifh/Hacen%20Liner%20Printout%20Lt.ttf?dl=0') format('truetype');
}
* {
font-family: 'Hacen Liner Printout Lt';
}
but it disappears and appears quickly every time the page loads, and I need to cache it.

PageSpeed Insights diagnostic "Ensure text remains visible during webfont load"

I'm getting the diagnostic on PageSpeed Insights
Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.
URL
Potential Savings
…v1/aWB4m0aac….woff2(fonts.gstatic.com) 10 ms
…v21/nuFvD-vYS….woff2(fonts.gstatic.com) 10 ms
…v13/6xK3dSBYK….woff2(fonts.gstatic.com) 10 ms
And I'm trying to correct it by changing
<link rel="stylesheet" href="https://fonts.googleapis.com" />
to
<link rel="stylesheet" href="https://fonts.googleapis.com/display=swap" />
But this actually throws a console error
I know that PageSpeed Insights recommends to add font-display: swap to #fontface, but I don't know what #fontface is.
I'm using Bootstrap and Gatsby
I know there's also gatsby-plugin-web-font-loader. Is there a way to use this to avoid this diagnostic?
These are all the times font-family shows up in my program. I'm using scss so most of them are variables
I only specify a font once in my program, and I think bootstrap chooses the font the rest of the time
blockquote > p {
font-family: 'Montserrat', sans-serif;
}
Update, I'm using this plugin now
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Montserrat`,
`Helvetica Neue`,
`Helvetica`,
`Arial`
],
display: 'swap'
}
},

You made a minor mistake.
It should be
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=TheFontYouWantToUse&display=swap />
If you do a forward slash as shown in your example it will result in a 404 not found, hence the console error. Replace it with a URL parameter (&) and it should work fine.
#fontface is just a way of loading a font from within a stylesheet.
For example within your main CSS file you could add the following and that would also load the font in. Notice the font-display property set to swap.
#font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}

#font-face is a rule that allows you to use multiple font-family rule instead of loading it in each selector.
Among all font plugin of fonts in Gatsby I recommend gatsby-plugin-google-fonts because it allows you to display and swap between fonts.
plugins: [
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`limelight`,
`source sans pro\:300,400,400i,700` // you can also specify font weights and styles
],
display: 'swap'
}
}
]
It's really useful since it's preloading the font without affecting the display (due to the swap property).
With Gatsby, <link rel="stylesheet" href="https://fonts.googleapis.com" /> this configuration is automated so you don't need to touch it. It's better to pre-render them using a plugin, since it's the power of Gatsby.

PDF created with puppeteer not showing font-awesome icons

i need to create a PDF Buffer and save this to the database. I am passing the complete DOM to puppeteer and most of it works just fine. When i open the created PDF Buffer, bootstrap styles are applied and i get a beautifull PDF.
However, font-awesome icons will not show up. i have only two CSS files: framework.css (created with SASS and containing custom styles, bootstrap styles and font-awesome) and print-media (contains print media css to hide or show stuff like the navigation). Here is my Code to create the PDF Buffer:
const browser = await puppeteer.launch({
args: ['--disable-dev-shm-usage', '--no-sandbox', '--headless', '--disable-gpu'],
executablePath: pathToChrome}
);
const page = await browser.newPage();
const content = await page.setContent(pdfOptions.dom);
const addCss7 = await page.addStyleTag({path: appPath + '/public/css/framework.css'});
const addCss8 = await page.addStyleTag({path: appPath + '/public/css/print-media.css'});
const buffer = await page.pdf();
F.log(buffer);
Inside the css folder i created a fonts folder containing the font-awesome fonts and #font-face refers to this path:
#font-face {
font-family: "FontAwesome";
src: url("./fonts/fontawesome-webfont.eot?v=4.7.0");
src: url("./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("./fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("./fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("./fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
Do i have to tell puppeteer that there are fonts it should use specifically or did i miss something else?
Thanks in advance,
Pascal
Edit:
Tried to use absolute path, but this will wont work either. If i do this, even the Website will not contain the fonts.
#font-face {
font-family: "FontAwesome";
src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?v=4.7.0");
src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff?v=4.7.0") format("woff"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}

As I commented on the question. The problem is the about:blank location. What I recommend is doing the following:
Create a web folder.
Put there your fonts folder.
Create there an empty.html file. Like this one https://github.com/GoogleChrome/puppeteer/blob/master/test/assets/empty.html
After doing const page = await browser.newPage(); call await page.goto('file://your path/expressed/as/url/web/empty.html');
Now your relative path "./fonts/, should work

I solved this issue by copying the specific fonts to my local filesystem fonts folder. On Mac OS I had to copy all Font Awesome fonts to ~/Library/Fonts.

I have embedded the font awesome css to the HTML header. It worked for me.
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>.
I am feeding HTML content using setContent method but I can see icons on the HTML before including the above link, and I don't like the idea to rely on external css link.

font-weight: 100 is not working in reactjs/javascript

I have problem in implementing font-weight: 100.
I want the my sentence to be ultra light/thin, but when I'm using font-weight:100, is not working.
What should I do? Do I need to import or install something?
I am using reactjs.
<p class="thin">Test</p>
.thin {
font-weight: 100;
}

In order to use specific font-weight, your font must support it, if it doesn't, then any value between 0 and 600 (not included, normal value is 400) will be interpreted as normal, and any greater value will be bold (bold normally is 700).
If your font doesn't have a light/thin variant, then I'm afraid you can't get a thinner font weight than normal (400).
EDIT NOTE : For fonts than only are normal (400), then bold is generated by default by the browser, for instance :
#import url('https://fonts.googleapis.com/css?family=Roboto');
p {
font-family: 'Roboto';
font-weight: 700;
}
<p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p>
In this case, the render may differ from one browser to another, although it usually don't.

If you select a font on google fonts you have two choices: Embed it with the default embed code or customize it (in the overlay you get after you select a font)
If you customize it you have the ability to select which font weights you want to include. not every font supports every font weight. if you can't select it, it doesn't exist for this font.

CSS: How to tell the features a certain ttf font has?

I have an arbitrary ttf font that I want to use in my web application.
How can I tell which characteristics like "bold", "italic" are available in this font?
Background: I want to avoid that I have to try out all the different settings like:
font-weight: bold;
font-style: italic;
in order to see which one has an effect on the appearance of the font on my web site.

Let me cut that thought short: that's not how ttf (or in fact, any) font resources work. Bold, Italic, etc are separate "physical" files on your harddisk, and the kind of style toggling you see in Office applications, text editors, etc. come from the OS showing you an abstraction: it only shows you the font family name, rather than the list of individual ttf or otf files, and then shows you style/weight UI controls, which trigger an actual font resource switch from one file to another without you ever noticing.
So: if you have a single ttf file, that file represents only one, specific , font face expression (regular, bold, italic, bold-italic, or even something more detailed based on OpenType metadata properties).
To make things even more fun: if you want to use fonts in CSS, CSS doesn't even care about what a particular font resource is. It completely relies on you to tell it what it is, and you get to lie: CSS will believe you. If you use an #font-face rule you get to say which font file to use for a particular combination of font-* properties, so you're in the driving seat:
#font-face {
font-family: MyFont;
/* CSS has no idea, nor does it care, what this font "really" is */
src: url('myfont-Bold-Italic.ttf') format("truetype");
/* so we tell it this font is applicable to weight:100, or ultra-thin */
font-weight: 100;
/* and we also tell it that this font is applicable in "normal" style */
font-style: normal;
}
And presto, as far as the page styling you just defined, using MyFont with normal style and weight 100 will load whatever ttf resource you said it should use. The CSS engine does not care or even know that the resource you told it to use is "actually" a bold italic expression of the font family. All it knows is that you said this font had to be used for weight:100/style:normal so that's what it's going to use in something like this:
body {
font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */
}
h1 {
weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */
}
2019 edit
OpenType introduced font variations (FVAR) which allows a single font to encode an infinite spectrum of variable vector graphics, which means that if the browser you're targeting supports FVAR OpenType, you can now load a single font as your #font-face instruction, with a new format string that indicates it's variable, and instead in your normal CSS indicate which specific variation you need by specifying the font-variation-settings property:
#font-face {
font-family: MyFont;
src: url('myfont-Bold-Italic.ttf') format("truetype-variation");
/* no weight or style information here anymore */
}
body {
font-family: MyFont;
font-variation-settings: 'wght' 435;
}
h1 {
font-variation-settings: 'wght' 116;
}
While "plain" CSS only supports 9 font weights (100 through 900 in steps of 100), variations can use values from 1 to 1000 in steps of 1.

Each and every font (if weights available) comes in a separate true type format file for each and every weight of the font.
e.g.
Roboto.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf
Therefore, you need to specify which is which in Your CSS file like so:
#font-face {
font-family: 'Roboto';
font-weight: normal;
url('fonts/Roboto.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: bold;
url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: lighter;
font-style: italic;
url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/;
}
In your case, you can view the particular file directly by clicking on it twice in the Windows/MacOS/Linux explorers.
If you want to use a third-party software solution, I suggest that you give opentype.js a look.