How to preload icon font in angular ssr? - html

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).

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 can we preload fonts in Angular?

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 "]
}
});

Google web font causes Safari crash

My app has been crashing on Safari (only) and I've narrowed it down to this one line:
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet">
This line causes no issue if I only load one weight, but once I add a second, Safari crashes again. In other words, the following works:
<link href="https://fonts.googleapis.com/css?family=Quicksand:300&display=swap" rel="stylesheet">
... this also works
<link href="https://fonts.googleapis.com/css?family=Quicksand:300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:700&display=swap" rel="stylesheet">
Any idea why this might happen?

<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

CSS nor recognised as CSS file

After building my web site for a while now, I wanted to see if I could upload it to my domain and see if it was functional from the web.
Now I have this error coming from my css files :
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://www.benny-water.com/Mainscss2.css"
I have been googling for 3 hours straight and haven't found a solution. If I understand it is my server (OVH) that is wrongly interpreting the css files as html or text files but I have no idea where to change this.
my code for the css files looks like this :
<head>
<title> Benny Water </title>
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oxygen"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli"/>
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio_style_default.css" />
<script type="text/javascript" src="js/Jportfolio/js/jquery-1.11.2.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/bootstrap.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/jportilio.js"/>
<script src="http://code.jquery.com/jquery-latest.min.js"/>
</head>
thank you for your help :)
Looking at your paths there seems to be a mismatch between where your CSS files are located.
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
The /style/Css3.css has a / in front of your path, but the style/Grid.css doesn't.
Your Mainscss2.css link is also closed incorrectly. I would removed </link> and close the tag with /> instead for consistency in your code.
The .css file must go inside the <head> tag, while the .js in the <body> tag. It is a rule but it obviously work anyway also when they all are inside <head> too.
About the path of your .css, are you sure it is correct?
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
there are 3 different paths for 3 .css
Use this scheme:
/var/www/mywebsite/index.php
/var/www/mywebsite/images/favicon.ico
/var/www/mywebsite/style/css/mytheme.css
/var/www/mywebsite/style/css/images/imagesUsedBymytheme.png
/var/www/mywebsite/style/js/myscript.js
of course modify it accordingly, if you are index.php, you would want to link your .css using this code:
<link rel="stylesheet" href="style/css/mytheme.css" type="text/css" >
EDIT:
<link> is a single tag, you can use it as <link rel="" href"" >