How can we preload fonts in Angular? - html

Should we include the fonts in index.html file with rel="preload" like the below code or can we configure this in Angular CLI to preload all the fonts required?
Please suggest me a better solution as I can see it takes multi-second page load time suggested in Google Analysis.
<link rel="preload" href="./assets/fonts/Lato/Lato-Semibold.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Black.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Bold.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Heavy.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Medium.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Regular.woff2" as="font" crossorigin>

Preconnect to the font file origin.
Preload the font stylesheet asynchronously with low priority.
Asynchronously load the font stylesheet and font file after the content has been rendered with JavaScript.
Provide a fallback font for users with JavaScript turned off.
Example::
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" />
</noscript>
For your reference : Link to Harry Roberts explanation on fonts loading

For this implementation in angular, you should use third-party dependency to load the fonts.
use webfontloader
npm i webfontloader
After that load your custom font like this
WebFont.load({
custom: {
families: [""Lato"]
}
});

For this implementation in angular, you should use third-party dependency to load the fonts.,Find centralized, trusted content and collaborate around the technologies you use most.,Connect and share knowledge within a single location that is structured and easy to search.
After that load your custom font like this
WebFont.load({
custom: {
families: [""
Lato "]
}
});

Related

Link preload issues

I am working on a simple dev in Google Apps Script. I also have html part. I can see in the browser console that there are issues related to link preload. Any recommendations or advisory on how to handle these errors? Details below:
Chrome console screen with the preload issues
My html head code:
<head>
<base target="_top">
<link rel="preconnect" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" crossorigin="anonymous">
<link rel="preload" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" as="style">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
The problem is you preload your asset but don't use it, in order to load and use it add onload attribute to your link, or just use that asset like your third link by using rel="stylesheet" and remove as attribute
<head>
<base target="_top">
<link rel="preconnect" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" crossorigin="anonymous">
<link rel="preload" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

How to preload icon font in angular ssr?

I want to preload icons and fonts before html gets rendered. I am using preload strategy to achieve this.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EbDesktopApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO55Roman.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO65Medium.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO75Bold.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO95Black.otf" as="font" type="font/otf" crossorigin="anonymous">
</head>
<body>
<body>
<app-root></app-root>
</body>
</html>
The problem is html starts rendering before icons finish load and also I can't see eb-icons.eot and eb-icons.svg in network tab.
The question is what am I doing wrong and how can I fix this?
I am no pro on this subject, but I searched a little on this and it might be related to priority or importance of loading.
I would recommend you check this article which deals with font preloading and details on several different options.
Also, you can check more on priorities here.
I would recommend you check which file formats you really need, that could reduce your file loading. You could use only Woff (Woff compatibility) in a combination with TTF (TTF Compatibility).

Preload font-awesome

I am trying to pre-load font-awesome to improve my page load times:
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="preload" as="font" type="font/woff2" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
However...Chrome seems to download the font twice and reports
The resource
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
was preloaded using link preload but not used within a few seconds
from the window's load event. Please make sure it wasn't preloaded for
nothing.
How do I get this to work?
You must add the crossorigin attribute when preloading fonts.
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
Along with marking a link as a preload stylesheet with rel="preload" (what you already did), we also need to use JavaScript to toggle the rel attribute to stylesheet when the file loads:
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
It can be loading it twice because of the order you are doing preload.
<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
Preload the font first so that, css #font-face does not send a request again to load it.
Try using this method:
<style>
#font-face {
font-family: 'FontAwesome-swap';
font-display: swap;
src: local('FontAwesome'), url(https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format('woff2');
}
</style>
The proper way to use preload is something like the following:
Preload the asset/font needed
Then use it somewhere in the page, does not matter if you use it inside javascript, css or html.
If you did not use the preloaded asset/font, chrome will warn you that preloaded font was not used within a certain timeframe:
The resource https://link-to-your-font-or-asset was
preloaded using link preload but not used within a few seconds from the
window's load event. Please make sure it has an appropriate `as` value and
it is preloaded intentionally.
If you need the font as soon as possible you can do something like:
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.woff2?68c5af1f48e2bfca1e57ae1c556a5c72">
Notice the rel="preload font", browser will detect preloading but since we specify font as second value (separated by space of course) it will use the preloaded asset/font immediately. If you are preloading stylesheet then put stylesheet as second value.
If we combine this approach with loading fontawesome stylesheet, font will not be downloaded twice since we utilized preload. The following code block will only load fontawesome font woff2 files once each.
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.woff2?68c5af1f48e2bfca1e57ae1c556a5c72">
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-solid-900.woff2?ada6e6df937f7e5e8b790dfea07109b7">
<link rel="preload font" as="font" type="font/woff2" crossorigin="anonymous" href="fonts/vendor/#fortawesome/fontawesome-free/webfa-brands-400.woff2?c1210e5ebe4344da508396540be7f52c">
<link rel="stylesheet" href="css/fontawesome-fonts.css">
I couldn't figure it out until I realized my pagespeed from LightHouse was giving error due to a LightHouse bug, not related to the speed of the page.
LightHouse wants the 'font-display' property to be set as 'swap'.
The new version of FontAwesome fixes this issue as described here: https://github.com/FortAwesome/Font-Awesome/issues/16077
So all I had to do was load the version v5.15.0 instead of v5.10.0

<link rel="preload" has an unsupported `type` value (fonts preload)

The following from Mozilla's web docs Preloading content with rel="preload" results in errors in chrome regarding the link type:
<head>
<meta charset="utf-8">
<title>Web font example</title>
<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
<link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
You can see the full example source code on GitHub (also see it live)
Here us a screenshot of the live link:
It seems these are the unsupported types that error out:
type="application/vnd.ms-fontobject"
type="image/svg+xml"
How can I get rid of that error in console for those webfont types? The types are as is from their example. I know I can physically hide the error via filters to not show in console, but I really want to prevent it from showing in the first place using a correct solution.
follow w3c about preload, you can remove type in preload tag
ex:
<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" crossorigin>
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="image" crossorigin>
.eot fonts aren't supported in Chrome, see:
https://caniuse.com/#feat=eot

Using rel=preconnect for both http and https resources from the same domain

I'm currently working on a web project and am looking for advice in relation to pre-connecting to a domain for sub-resources.
My assumption is that ideally, all of the sub-resources should be served from the domain using the same protocol, thus saving round-trips to the server. However, in some areas of the code I'm working from, some resources are being loaded via http and in other areas, the resources are being loaded via https.
For the purpose of this question, please imagine that I don't have access to some sections of the code.
To get the benefits of pre-connecting, (in the time between now and liaising with others to use the same route), would it be better to include:
<link rel="preconnect" href="http://www.example.com" />
<link rel="preconnect" href="https://www.example.com" />
Or use the following protocol-relative URL:
<link rel="preconnect" href="//www.example.com" />
You need to preconnect to both protocols because they are considered as two different domains by the browser:
<link rel="preconnect" href="http://www.example.com" />
<link rel="preconnect" href="https://www.example.com" />
If you want to go further, I would also recommend the use of dns-prefetch, for browsers that can't currently handle preconnect. So it would look like:
<link rel="preconnect" href="http://www.example.com" />
<link rel="dns-prefetch" href="http://www.example.com" />
<link rel="preconnect" href="https://www.example.com" />
<link rel="dns-prefetch" href="https://www.example.com" />