Since upgrading to Sage 9.0.10, I can't import my fonts. All my fonts (.woff & woff2) are in assets>fonts, in main.scss #import "base/fonts" and in fonts.scss I have this:
#font-face {
font-family: "Font";
src: url("/../fonts/Font-name.woff2") format ("woff2"), url("/../fonts/Font-name.woff")
format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
With this, I have no error when I compile. I don't have this problem on my other projects.
I tested lots of things, modified the path or changed folder etc.
Maybe I have forgotten a little thing, thank you so much.
Not sure whether that matters but how about removing the extra newline in the src part:
#font-face {
font-family: "Font";
src: url("/../fonts/Font-name.woff2") format ("woff2"), url("/../fonts/Font-name.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
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.
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.
I'm trying to do global font faces for my app and so in the index.jsx I import fonts.css which contains:
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Medium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Extrabold.woff') format('woff');
font-weight: bolder;
font-style: normal;
}
body,
html {
font-family: 'ProximaNova';
}
In the chrome dev tools, I see that it's trying to get the font, but it returns html instead of the font it actually wants. This results in the font not being able to be decoded.
I'm pretty sure this is a result of my use of react-router-dom having a 404 route and webpack having some kind of issue.
This seems like such a trivial thing to do but it's been taking me the past hour and a half and I've gotten nowhere. Let me know if I need to be more clear. Thanks for your help
For example the Victor Mono font has vastly different (ie. properly designed) Italic and Oblique styles, and I'm using it as my prefered programming font, however I can't seem to make it properly show both styles at the same time in code editors/text processors or on a webpage.
When I installed the font on my local system, both Italic and Oblique shows the Italic variant, I figured it might be an issue with the OS font system, so I tried to embed the fonts with CSS like this
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;
}
but now both
html {font-family:Victor Mono; font-weight:normal; font-style: italic;}
and
html {font-family:Victor Mono; font-weight:normal; font-style: oblique;}
shows the Oblique style. While if I re-order the #font-face rules to put the Italic one below the Oblique one like this
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;
}
#font-face {
font-family: 'Victor Mono';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
both Italic and Oblique styles will show the Italic variant. So it seems font-style: italic and font-style: oblique are actually interpreted as the same rule by the render engine and the rule appears later will override the former one?
So how should I show different italic and oblique font styles? For example I'd like VSCode to show comments in Italic style while reserved keywords in Oblique style. Currently it shows Italic all the time for both comments and reserved keywords which hurts my eyes when I look through the code.
I think its beacause of same font-family name, try this out:
#font-face {
font-family: 'Victor Mono Normal';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'Victor Mono Oblique';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;}
#font-face {
font-family: 'Victor Mono Italic';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;}
The dist css in the Github repo only links the italic version - I've seen issues when oblique is referenced in this way, so that may be causing problems. The demo site's css declares them separately like Fahim Khan's answer mentions, so that may be what you have to do if you want to reference them separately.
I'm not sure the designer intended for you to be able to use the three styles together like that, or how it would be done - the example code only uses the normal and italic together. IIRC, most editors have a separate bold font setting you can set to a different font - this may be how they're combining them in their editor, by setting that to the italic version.
I have a case where I have already defined font-face declarations
#font-face {
font-family: 'some font';
src: url('somelink') format('woff');
font-weight: 900;
font-style: normal;
}
I have no ablilty to edit this code, but I need to add one more declaration(font-display: optional), is there a way to do that?
Currently what am I doing is that I am just overwriting this declaration in the stylesheet where I have control with something like this:
#font-face {
font-family: 'some font';
src: url('somelink') format('woff');
font-weight: 900;
font-style: normal;
font-display: optional;
}
But I am not even sure if it works. How would you test that? Is there a better way to do it? Thanks in advance.
You can't override #font-face definitions.
Common practice is to create a new #font-face with a different name and then use the new name in font-family:
#font-face {
font-family: 'some font 2';
src: url('somelink') format('woff');
font-weight: 900;
font-style: normal;
font-display: optional;
}
.item {
font-family: 'some font 2`
}