I have blueprint 90% working, and am able to implement the features - except for the icon library. I've tried several other UI toolkits, and this is the first one which I've had Icon issues with.
I have tried dumping the icons and CSS files directly into my meteor client folder and relinked the CSS dependencies, so it shouldn't be a file access issue. I would just use a different icon library, but it's a lot of work to re-link everything through the CSS file
#font-face {
font-family: "Icons16";
font-style: normal;
font-weight: normal;
src: url("icons-16.eot?#iefix") format("embedded-opentype"), url("icons-16.woff") format("woff"), url("icons-16.ttf") format("truetype"); }
I'm sorry, I don't understand the actual issue you're facing. I haven't used Meteor in some time, either, so I can't help there.
We use postcss-copy-assets in our build to ensure that the font files and other images used in the CSS files get copied to the correct place at build time.
Related
I'm building an Electron app that needs to run on Windows. The stack exists of React + Typescript, SCSS + TailwindCSS. The style is compiled with postcss. The Electron app is built with electron-builder.
After compiling the style, creating new Electron installer for Windows and running this installer the included font's don't seem to work.
When checking the build folder that functions as the output folder for electron-builder, all font files are present in the static/media folder. If I check the link to the font files when the Electron app is running, the link in the CSS also links to the generated static folder where the files are.
Files & code
The font files are located in: src/assets/font/;
For each weight I use (only 2) there are: .ttf, .woff, woff2, .svg and .eot available;
The font is loaded through SASS:
#font-face {
font-family: 'Montserrat';
font-weight: 500;
src: url('../font/Montserrat-Medium.ttf') format('truetype'),
url('../font/Montserrat-Medium.woff2') format('woff2'),
url('../font/Montserrat-Medium.woff') format('woff'),
url('../font/Montserrat-Medium.svg') format('svg'),
url('../font/Montserrat-Medium.eot') format('eot');
}
#font-face {
font-family: 'Montserrat';
font-weight: 700;
src: url('../font/Montserrat-Bold.ttf') format('truetype')
url('../font/Montserrat-Bold.woff2') format('woff2'),
url('../font/Montserrat-Bold.woff') format('woff'),
url('../font/Montserrat-Bold.svg') format('svg'),
url('../font/Montserrat-Bold.eot') format('eot');
}
Then it is loaded in TailwindCSS as basic font, configured in the tailwindconfig:
theme: {
fontFamily: {
sans: ['Montserrat', 'sans-serif'],
body: ['Montserrat'],
bold: ['Montserrat']
},
... rest of config file
Facts
The font works if it is installed locally on Windows.
When it's not found, the app doesn't fallback to a sans-serif font.
The font files and link to the font files is correct when checking the CSS in the running application (Chromium element inspector).
All other styles work correctly, only the font isn't working. So it looks like the CSS is compiled and loaded properly.
Checked resource
Custom font is not showing on Electron + Vue App (yes it's Vue, but the answer still is: use #font-face).
https://www.reddit.com/r/electronjs/comments/bhaiva/how_to_load_custom_fonts_in_electron_app/
https://discuss.atom.io/t/how-to-use-specific-font-in-electron-app/32215
https://github.com/electron-userland/electron-webpack/issues/163
https://dev.to/theola/electron-app-with-webpack-bootstrap-fontawesome-and-jquery-a-complete-guide-54k2
Questions
When running the installer.exe that is created with electron-builder, do you need to include an assets folder and/or other files in the installation folder (e.g.: builder-effective-config.yaml)?
Are there other ways to include a local font? I don't want to use a CDN or other online source.
All resources I currently found say it should work when using #font-face.
Note: if you require more information, please let me know and I'll provide it.
Ok, after a little more testing/checking the issue was the React build. It loaded an older configuration, that was breaking the font load.
Thanks all who read it!
I'm having trouble setting up my project to use downloaded google fonts. I'm working with a create-react-app generated project, with Sass as my pre-processor. The project structure is seen in the linked screenshot. Both the styles and fonts folders fall directly under the parent src folder. While obviously not the same thing, I got it, with a similar structure, to work on a Vue-CLI generated project, but for whatever reason it fails with React.
I've tried changing the src url ('../../fonts/' crashes the server i.e. file not found) but nothing works. What gives?
I realize that this issue has been brought up in one way or another, but none of the suggested solutions have worked for me.
Typography file
#font-face {
font-family: 'Montserrat';
src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Regular.ttf') format('opentype');
}
#font-face {
font-family: 'Montserrat';
font-weight: 700;
src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Bold.ttf') format('opentype');
}
#font-face {
font-family: 'Montserrat';
font-weight: 100;
src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Thin.ttf') format('opentype');
}
Styles (SASS) entry file
#import 'utils/typography';
#import 'utils/variables';
#import 'utils/functions';
#import 'utils/mixins';
#import 'base';
Screenshot of project structure
you can add this to the index.html:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
replace Lato with any google font
then it will be available in your project for use
I am starting a new website in React and I need to use a font from Google called FredokaOne.
I have used the command:
npm install --save typeface-fredoka-one
Everything went well but I can't figure-out how to use it.
I tried this :
font-family: FredokaOne;
font-size: 40px;
But it still using the default font. Is there a way to checkout the proper font to use ?
or any missing params.
Thanks
Regards
You can add #import inside index.css file of react project.
Index.css
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
*{
font-family: 'Fredoka One', cursive;
}
Question
How to quickly test different fonts in a React project?
Overview
I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:
body
font-family: Roboto, Helvetica, Arial, sans-serif
font-size: 16px
Desired outcome
I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.
For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.
What have I looked at?
I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.
I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how.
Thanks for any help showing how I should approach this.
Let me kick my answer off with a warning:
Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.
Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic #font-face declarations, or Kyle Matthew's typefaces packages, for example.
Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.
1. Get a link to embed your fonts client-side
First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:
https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat
2. Embed the fonts on your Gatsby site
To embed the link on your Gatsby site, you have two choices:
using <link>
You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.
In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
<HelmetDatoCms
favicon={data.datoCmsSite.faviconMetaTags}
seo={data.datoCmsHome.seoMetaTags}
>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using #import
You can import a remote font in CSS (or SASS):
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.
In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.
3. Use the fonts in your CSS
Third, no matter if you chose the <link> or the #import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.
You'll want something like this:
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3 {
font-family: 'Great Vibes', cursive;
}
I'm creating an app where I have to generate a PDF of a React Component say ABC. The component ABC has both English and Tamil text in it. When I try to generate the component using the #progess/kendo-react-pdf package, the Tamil font isn't rendered properly. Some random characters are printed in the PDF.
For Reference, check out this code
Enable the embedding of fonts by obtaining and hosting the .ttf files and declaring the URLs
https://www.telerik.com/kendo-react-ui/components/drawing/pdf-output/embedded-fonts/
Define the fonts, use the #font-face CSS declarations
#font-face {
font-family: "DejaVu Sans";
src: url("fonts/yourFont.ttf") format("truetype");
}