So I'm creating a full stack React/Node site, my custom fonts don't load on half my pages so far though, one with loads of content and one with no content.. and then they do work on one with loads of content and one with no content ?!? and I have another front end only page where they did originally worked and then stopped working again
I'm assuming its because I'm on a ubuntu virtual machine on my laptop using 5gb ram, is there anything I can do to make it work? I think I can add more ram eventually but is there another fix?
im using chakra UI as well
font face
import { Global } from "#emotion/react";
const Fonts = () => (
<Global
styles={`
#font-face {
font-family: 'BebasNeue';
src: url(fonts/BebasNeue-Regular.woff) format('woff');
}
#font-face {
font-family: 'Vollkorn';
src: url(fonts/Vollkorn.woff) format('woff');
}
#font-face {
font-family: 'Neoneon';
src: url(fonts/Neoneon.woff) format('woff');
} `}
/>
);
export default Fonts;
My pre loads in html
<link
rel="preload"
as="font"
href="./fonts/BebasNeue-Regular.woff2"
type="font/woff2"
crossorigin="anonymous"
value="valid"
/>
<link
rel="preload"
as="font"
href="./fonts/Neoneon.woff2"
type="font/woff2"
crossorigin="anonymous"
value="valid"
/>
<link
rel="preload"
as="font"
href="./fonts/Vollkorn.woff2"
type="font/woff2"
crossorigin="anonymous"
value="valid"
/>
the error codes
ownloadable font: download failed (font-family: "Neoneon" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:3000/recipe/fonts/Neoneon.woff
The resource at “http://localhost:3000/recipe/fonts/BebasNeue-Regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
Proxy error: Could not proxy request /recipe/fonts/Vollkorn.woff from localhost:3000 to http://localhost/5000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED)
This works for me using chakra and nextjs.
create a file styles.css with
#font-face {
font-family: "Font";
src: url('../your/path/Font.woff');
font-weight: normal;
font-style: normal;
}
in your index.js
import '../path/styles.css'
then you can use fontFamily properties or use in your theme
export default extendTheme({
// ...
fonts: {
body: `Font`,
},
})
do you don't need to use link and Global component
Related
In my nextJS application, I need to load a stylesheet dynamically based on the user preference received from the database.
So, in my page, I'm adding it in the Head (next/head), as follows:
<Head>
<link rel="stylesheet" href={`/fonts/${type}/stylesheet.css`}></link>
</Head>
However, this is giving me a warning in the console in development mode:
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="/fonts/cal/stylesheet.css"). Use Document instead.
See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component
The stylesheet itself contains the font-face:
#font-face {
font-family: "Cal Sans";
src: url("CalSans-SemiBold.woff2") format("woff2"),
url("CalSans-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
Since the user's preference is stored in the database, and I receive this value via a query, I don't know how I can add it to the Document.js file.
I'll really appreciate any help on this.
While it might be possible to dynamically import a CSS file in your main app component (and you can check out an example in this guide), I would suggest a different solution.
Include all stylesheets in your application, but make its styles only apply when the html (or body) element has a certain class. Then all you need to do is modify that class based on user preference.
// styles.css
body.themeFoo #container {
// some styles...
}
This is how many implementations of dark mode work, e.g. in tailwind CSS. I believe this is a better pattern to solve your problem.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" href="..." />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
This problem is resolved in the new Nextjs version where they provide support for Font Optimization, as documented here - https://nextjs.org/docs/basic-features/font-optimization
It also supports font self-hosting which was the key to my requirements.
I'm building an Astro Js project, I wan't to import a css file (for icons) from a dependency which include their own font files :
// #icons/dist/.../index.css
#font-face {
font-family: "font name";
src: url("./icons.ttf") format("truetype"),
url("./icons.woff") format("woff"),
url("./icons.woff2") format("woff2");
}
When building I have a replacement which is not including the font file in the dist folder, the compiled css :
#font-face {
font-family: 'font name';
src: url(__VITE_ASSET__e6e97650__$_?6cdb7df3dc807c5592752bbd5d1c724e__) format('truetype'),
url(__VITE_ASSET__bc194da8__$_?6cdb7df3dc807c5592752bbd5d1c724e__) format('woff'),
url(__VITE_ASSET__c837e718__$_?6cdb7df3dc807c5592752bbd5d1c724e__) format('woff2');
}
Does anyone had this issue and know how to resolve it ?
If icons.ttf is inside the public folder, the url should be: url("/icons.ttf")
Basically you need to remove the dot so it target the public folder instead of the folder where you have the CSS file.
hi how can i use some custom font in my ionic app?
for example this font
http://fontonline.ir/btitrbold.html
<link href='http://www.fontonline.ir/css/BTitrBold.css' rel='stylesheet' type='text/css'>
but if my app is offline fonts won't load
i open the Reference
#font-face {
font-family: 'BTitrBold';
src: url('http://fontonline.ir/fonts/BTitrBold.eot?#') format('eot'),
url('http://fontonline.ir/fonts/BTitrBold.ttf') format('truetype'),
url('http://fontonline.ir/fonts/BTitrBold.woff') format('woff');
}
can i download fonts and put it in for example assets folder and change style code to load it offline?
Download your required Font and add it to your assets/fonts folder.
Go to your theme folder open variable.scss file
import your font like:
#font-face {
font-family: 'YOUR_FONT_NAME';
src: url('../assets/fonts/YOUR_FONT_NAME.ttf');
font-weight: normal;
font-style: normal;
}
If you want to use it for Whole app then add it to your global.scss file
e.g:
* {
font-family: 'YOUR_FONT_NAME'; // font-family name you declared above.
}
Currently fonts are included in CSS file like below:
#font-face {
font-family: 'icomoon';
src: url("../fonts/icomoon.eot");
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
But when the page loads, it blocks rendering until these heavy fonts are loaded. Should I just include in HTML using <style> tag but is there a better way to keep page loading speed optimized?
Even if you use JavaScript it will be the same ... instead you can show a preloader overlay until the page loads completely .. then just hide the preloader overlay
https://css-tricks.com/snippets/css/using-font-face/
My website allows user write short stories. I want they can free to format and style text, so I install NicEdit to do that. But NicEdit just has 9 default fonts; how to add more?
This is my editor. It use default code with full panel control.
Very happy, I've added news fonts NicEdit successful. I post answer here, hope it userful for everyone has the same problem.
1.Download font file, save in some folder, in my way is 'css/font'
2.Register in css file: add a css file "CustomFonts.css" has content:
(I use Fugaz One download from Google Font)
#font-face {
font-family: "FugazOne";
src: url('font/FugazOne-Regular.ttf');
src: url('font/FugazOne-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
You may change path to font file.
3.Link css file in html form, before add nicEdit.js lib:
<link rel="stylesheet" type="text/css" href="css/customFont.css" />
<script type="text/javascript" src="js/nicEdit/nicEdit_dev.js"></script>
4.Open nicEdit.js and find word "nicEditorFontFamilySelect". You will see a fonts list use in nicEdit, add new font here by font-family register in css:
sel : {'arial' : 'Arial',..., 'FugazOne':'FugazOne'},
5.tada... DONE!
P/s: when show content from database, you must sure webpage had load customFont.css.