I have an angular 13 project, in index.html I have
<link
href="//fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap"
rel="stylesheet"
/>
when building the app it replaces this element with its content
<style type="text/css">
#font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF,
U+A640-A69F, U+FE2E-FE2F;
}
...
</style>
I want to prevent Angular from this behavior and keep the element <link> as it.
I searched for something like extractCss: false but it deprecated
I thought about using custom-webpack to override plugins but I don't know how to do that (I know how to use custom-webpack, but don't know how to disable a plugin and which plugin should be disabled)
Related
I'm trying to optimize the use of fonts in my Nuxt 3 application. Nuxt 3 documentations suggest to put the fonts in the assets directory, but I wanted to preload the fonts for better performance, so I've added them and the css file that defines my font-faces to the public directory, and added them to my project via app.vue file like this
app.vue
<template>
<Head>
<link rel="preload" as="style" href="/fonts/font.css" crossorigin="anonymous">
</Head>
<nuxt-layout>
<nuxt-page />
</nuxt-layout>
</template>
Here is my font.css file which is placed in the ~/public/fonts directory, next to my font files:
#font-face {
font-family: "Urbanist";
src: url("/fonts/Urbanist/Urbanist[wght].woff2") format('woff2'),
url("/fonts/Urbanist/Urbanist[wght].ttf") format('truetype');
font-weight: 100 900;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Light.woff2") format('woff2'),
url("/fonts/Lato/Lato-Light.ttf") format('truetype');
font-weight: 300;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Regular.woff2") format('woff2'),
url("/fonts/Lato/Lato-Regular.ttf") format('truetype');
font-weight: 400;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Bold.woff2") format('woff2'),
url("/fonts/Lato/Lato-Bold.ttf") format('truetype');
font-weight: 700;
font-display: swap;
}
#font-face {
font-family: "Lato";
src: url("/fonts/Lato/Lato-Black.woff2") format('woff2'),
url("/fonts/Lato/Lato-Black.ttf") format('truetype');
font-weight: 900;
font-display: swap;
}
Everything is working fine, but I wanted to know if it's the right approach?
Is there a better way to preload my fonts for better performance?
First off, you don't really get anything else from loading it from the public directory or the assets one regarding preloading. You may have some optimizations in the assets one but anyway, preloading a local font is probably not useful and can even make your performance page speed worse (because of your page's loading order).
Give a read to that one: https://web.dev/font-best-practices/#be-cautious-when-using-preload-to-load-fonts
Here is a thread on how to optimize fonts even further: https://twitter.com/filrakowski/status/1582691561741070336
There you will see tools from Meownica and Daniel that could be useful.
Font optimization is a broad topic and I'll recommend following the good practices recommended by experts, on top of using those tools.
Want to go even further? Here you go.
TLDR: follow the recommendations.
What will browser(Chromium) load and use if we have the following case:
Inside css file we load local font like
<style>
#font-face {
font-family: 'Gotham';
font-style: normal;
font-weight: 400;
src: url('fonts/Gotham-400-Book.woff2') format('woff2'),
url('fonts/Gotham-400-Book.woff') format('woff');
}
</style>
and inside html we have same font loaded through some CDN like:
<link href="http://fonts.cdnfonts.com/css/gotham" rel="stylesheet">
then in our css styles we use it like
font-family: 'Gotham', sans-serif;
note Gotham is used here only for example purpose.
I am hosting fonts in my server and it can be accessed like - https://cdn.mywebsite/fonts/font-name
Now I have a css file (in the same folder as index.html) where I am importing these using #font-face like this:
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
font-weight: 300;
font-style: italic;
}
...... and a few more
I tried importing this file in my index.html using 2 methods, both returning 404 error in network tab.
1.
<style type='text/css'>
#import url('fonts.css');
</style>
<link rel="stylesheet" type="text/css" href="fonts.css"/>
In #2, I've tried to use src/..../fonts.css and ./fonts.css and /fonts.css (similar tries for #1 too)
I am not sure what's happening and why its not working.
NOW what IS working is adding the css directly within component like this:
<style type="text/css">
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'fontname';
src:url('https://cdn.mywebsite.com/fonts/font-name-light.woff2') format('woff2'),
url('https://cdn.mywebsite.com/fonts/font-name-light.woff') format('woff');
font-weight: 300;
font-style: italic;
}
</style>
I'm using node express and react (but that shouldn't matter, I think).
Any help is greatly appreciated.
A few things to look at.
https://cdn/mywebsite.com/fonts/font-name.woff2 is not a valid URL, because cdn is not a valid hostname. You need https://cdn.mywebsite.com/fonts/font-name.woff2 or maybe something like https://cdn.example.com/mywebsite.com/fonts/font-name.woff2 for the woff2 font file object.
Your css needs to mention more than just the woff2 font file to work cross-browser. You need other formats too. Here's an example of part of a workable css file for FontAwesome. (See this. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css)
#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;
}
Your favorite search engine will find several online tools for creating web font assets, including the CSS files and the various font file formats.
all. I've referenced SO often and appreciate the community and expertise. Great site! I'm a noob member, so bear with me.
PROBLEM: embedded files not loaded/displayed
ROOT DIR has two dirs: plugins and project
plugins has files mycss.css and 4 font files (2 woff, 2 ttf)
mycss.css
#font-face {
font-family: 'ALG';
src: url('ALGbvs.woff') format('woff'),
url('ALGbvs.ttf') format('truetype');
}
#font-face {
font-family: 'BVS';
src: url('BitstreamVeraSans.woff') format('woff'),
url('BitstreamVeraSans.ttf') format('truetype');
}
index.html contains (excerpts)
<head>
...
<!-- font-family: ALG and BVS -->
<link href="../plugins/mycss.css" rel="stylesheet" type="text/css" />
...
<style>
body {
font-family: ALG;
background-color: #F9EFE2;
margin: 0;
}
</style>
</head>
I thought I was referencing the css file and the fonts correctly, but they are not loaded/displayed in the body. What am I missing? Thanks for all reads and replies.
First of all use #font-face with more generalize way like,
use this font-face generator tool to generate font-face files for all major browsers Font-Face Generator
#font-face {
font-family: "ALG";
src: url("myfont/ALGbvs.eot");
src: url("myfont/ALGbvs.eot?#iefix") format("embedded-opentype"),
url("myfont/ALGbvs.woff") format("woff"),
url("myfont/ALGbvs.ttf") format("truetype"),
url("myfont/ALGbvs.svg#ALG") format("svg");
font-weight: normal;
font-style: normal;
}
Then check that you are mentioning font file paths correctly, let's assume your folder for all fonts say 'myfont' is in same folder where you have saved your css file.
Then your body tag will be like,
body {
font-family: "ALG";
}
You missed to define source in your css. Add full font url location like this:
#font-face {src: url("../plugins/ALGbvs.ttf");}
i used below code for font support using from ,
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald|Play|Numans' rel='stylesheet' type='text/css'>
if i use the above URL, the fonts supported in all the browser.
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: normal;
src: local('Oswald '), local('Oswald'), url('http://themes.googleusercontent.com/static/fonts/oswald/v2/-g5pDUSRgvxvOl5u-a_WHw.woff') format('woff');
}
#font-face {
font-family: 'Numans';
font-style: normal;
font-weight: 400;
src: local('Numans'), local('Numans-Regular'), url('http://themes.googleusercontent.com/static/fonts/numans/v2/H6jkjoZl4TIrPYyjhdoCcw.woff') format('woff');
}
#font-face {
font-family: 'Play';
font-style: normal;
font-weight: normal;
src: local('Play'), url('http://themes.googleusercontent.com/static/fonts/play/v2/-SXnV4mZjf4oh1IBw13WZw.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
i copied and paste the above css code in my CSS for fonts support.in IE8 Alone the font not supported. is there any fix for that.
The reason that it stops working when you copy the CSS is that Google sends back different CSS depending on the user agent that made the request.
The CSS returned for IE is different to the CSS you've copied.
So, if you're using Google Web Fonts, then use it with <link href.. as recommended.
If you want to host the font locally, read this: How to host google web fonts on my own server?