samuelmeuli / font-picker Goto Github PK
View Code? Open in Web Editor NEW✏️ Font selector component for Google Fonts
Home Page: https://font-picker.samuelmeuli.com
License: MIT License
✏️ Font selector component for Google Fonts
Home Page: https://font-picker.samuelmeuli.com
License: MIT License
Hello
Thanks for the font-picker, it works pretty nice but I have the following issue:
Currently the onChange function will trigger after the font were selected - but BEFORE it were loaded and actually applied.
I need the callback on when the font is loaded since I'm using fonts with canvas text - and those require manual update to be properly redrawn.
Hello. How can I set "Not selected" row?
For example i want to allow for user "reset" the font setting. The row with empty value.
I used the following code:
<div id="font-picker"></div>
const fontPicker = new FontPicker(GOOGLE_API_KEY, "Open Sans", {
limit: 30
});
I also tried specifying the pickerId
:
<div id="font-picker-bodytext"></div>
const bodyTextFontPicker = new FontPicker(
GOOGLE_API_KEY,
"Open Sans",
{
pickerId: "bodytext",
limit: 25
}
);
But I get the following error:
Cannot read property 'OPTIONS_DEFAULTS' of undefined at new FontPicker
I included the FontPicker.js
from the dist
folder.
Plaese add the js file instead of ts
Great plugin you have here saved me a ton of time, How do we add a new font or a set of fonts to the drop down list even after it's rendered on the page.
Thanks a lot :)
I'm trying to remove a bunch of font families, Hind Siliguri, Hind Madurai, Mukta, Noto Sans HK, Noto Sans JP, and more.
Are there any examples I can remove them onload?
I can use removeFont
onChange, but not onload.
Also adding the removeFont
method to the onChange
callback, it fires errors when I select a font since it is already removed.
const fontPicker = new FontPicker(
"My-API-Key", // Google API key
"Open Sans", // Default font
{ limit: 100 }, // Additional options
()=>{
const fontsToRemove =['Hind Siliguri', 'Hind Madurai','Mukta','Noto Sans HK','Noto Sans JP','Noto Sans KR','Noto Sans SC','Noto Sans TC','Noto Serif JP','Assistant','Mulish','Padauk', 'Cormorant Garamond']
fontsToRemove.forEach(font => {
fontPicker.removeFont(font)
});
}
);
export interface Options {
pickerId?: string;
families?: string[];
categories?: Category[];
scripts?: Script[];
variants?: Variant[];
filter?: (font: Font) => boolean;
limit?: number;
sort?: SortOption;
}
it would be better to set options to nullable, because it complains when using the module in typescript
I cloned your font-manager repo, I found the source of the styles but I couldn't manage to understand the connection of styles to font-picker.
Hey @samuelmeuli ,
Thanks for the great tool, very useful !
I am trying to use it in a demo with a canvas, so the onChange event seems perfect to re-render the canvas after the font is changed.
But that does not work as the event is fired before the font is fetched.
I have tried to dig in the code if it is expected behavior or issue.
The code here feels like the event should be fired after font is loaded:
https://github.com/samuelmeuli/font-manager/blob/fd522c973b06903e59b9fe756727100d993c8dad/src/FontManager.ts#L182
But inside that function, loading is not made async:
https://github.com/samuelmeuli/font-manager/blob/b11dce5cda750a2619e37581d3f2b2d19eefd010/src/loadFonts.ts#L79
What's your thoughts on this ?
Thank you!
Emmanuel
Hi,
got a question that I can't even believe myself. I found that according to https://en.m.wikipedia.org/wiki/Google_Fonts
Webmasters within Germany have received warning letters from lawyers claiming that loading Google Fonts directly from Google servers was not GDPR compliant.
According to some German sources the webmasters were even asked to pay for the warning letters.
Is there an offline mode with which to load the fonts locally to avoid potential violations of EU GDPR law?
Thanks a lot a man - really love the picker!
Cheers Tom
Hello,
I am trying to implement the lib on a Rails app, with the purpose of being able to select a font in an admin panel to use it later on the front.
My idea is to call another function with onChange
to get the value of the selected font and add it to a hidden input in my form, in order to save it to the database
Currently doing simple test, I noticed an error on onChange
Here is what I got so far :
import FontPicker from "font-picker/dist/FontPicker.js";
$(document).on('turbolinks:load', function() {
const fontPickerTitle = new FontPicker(
'xxxxxxxxxxxxxxxx',
"Ubuntu",
{ pickerId: "title" },
{ onChange: console.log('test') }
);
})
On first load, the console.log('test')
works correctly.
But when I select another font in the dropdown, I got the following error :
TypeError: _this2.onChange is not a function
Maybe this is due to Rails turbolinks, but I didn't find another way than wrapping the const into on('turbolinks:load', function()
, otherwise it does not find the markup with the ID of the div font-picker-title
.
Any clue on what is going on ?
Thanks!
When I try and run my project using parceljs (which worked with font-picker 2.x) i get this error 'Cannot resolve dependency 'font-picker''
Not sure whats causing it but I took a look at the package.json in node_modules and these paths dont seem to exist:
"main": "dist/font-picker/FontPicker.js",
"module": "dist/font-picker/FontPicker.es.js",
Hi!
Im using this awesome font picker, but Im having trouble with some standard characters.
Example: The Uppercase X doesnt work, but the lower case does work:
In GoogleFonts you can see that the characters are supported:
I miss those characters both in the preview and then using them in the project.
What do you think I need to look for?
Hello, what would be the best method to have multiple font-pickers?
Hello. I would like to ask how to add the standard fonts as Times New Roma, Tahoma etc?
fontPicker.addFont('Arial');
this is works.
fontPicker.addFont('Tahoma');
doesnt work
fontPicker.addFont('Helvetica');
doesnt work
Hi there,
I just wanted to ask is there an option to reset the picker font back to the default font? I've gone over the documentation and I can't personally find anything, but I could be missing it. If not, is there any way to implement this kind of feature?
I'm using the same bundle in two different environments(testing which is a copy of the full website and local which is just the necessary parts to launch the same) and for some weird reason font-picker works fine on local and doesn't work on testing - it doesn't generate the dropdown list properly.
I've checker everything through headers to response and I've debugged to one simple conclusion - this link is generated wrongly:
https://fonts.googleapis.com/css?family=&subset=latin&text=&font-display=swap
since it should look like this
https://fonts.googleapis.com/css?family=Roboto%3Aregular%7CLato%3Aregular%7CMontserrat%3Aregular%7CRoboto+Condensed%3Aregular%7CSource+Sans+Pro%3Aregular%7COswald%3Aregular%7CRaleway%3Aregular%7CRoboto+Mono%3Aregular%7CMerriweather%3Aregular%7CRoboto+Slab%3Aregular%7CPoppins%3Aregular%7CNoto+Sans%3Aregular%7CPT+Sans%3Aregular%7CUbuntu%3Aregular%7CPlayfair+Display%3Aregular%7CMuli%3Aregular%7CPT+Serif%3Aregular%7CLora%3Aregular%7CSlabo+27px%3Aregular%7CTitillium+Web%3Aregular%7CNunito%3Aregular%7CFira+Sans%3Aregular%7CNoto+Serif%3Aregular%7CRubik%3Aregular%7CWork+Sans%3Aregular%7CNanum+Gothic%3Aregular%7CNoto+Sans+JP%3Aregular%7CInconsolata%3Aregular%7CQuicksand%3Aregular&subset=latin&text=RobtLaMnser+CdSucPOwlyihpNTUfD27xmWFkGJIQ&font-display=swap
Since I didn't saw any changes on the previous response - I've dug into JS
And do you have any idea why with the same fontMap input produces different results with Array.from(fontMap.values());?
testing:
I'm using webpack and babel. It is super-weird that same bundle works differently in different environments.
I had issues with Map and Webpack previously.
Any advice on why this happens?
Hey the generated Download-Url uses '|' to devide several variants of a font. I think the correct way would be an','.
Compare:
https://fonts.googleapis.com/css?family=Cormorant+Garamond:regular,700
vs
https://fonts.googleapis.com/css?family=Cormorant+Garamond:regular|700
Is there an option to configure the background colors of the menu component? Had a look at the source and it seems hardcoded in css string. Any way to bring it to options to make it configurable?
Hello,
Loving your script, thanks. Is there a way to add some caching the google web fonts requests so it uses fewer api calls (e.g. a local JSON file etc)?
Font-picker is used as a dependency in react-font-picker. Building the project fails due to document not being defined at build time. You need to wrap lines 158-159 of index.es.js
as
if(typeof document !== 'undefined'){
var previewFontsStylesheet = document.createElement("style");
document.head.appendChild(previewFontsStylesheet);
}
this.dropdownButton.append
Hey Samuel and friends... My expectation of the below is that foo() will execute each time the active font is changed. In other words, the onChange function of the constructor should fire every time a user selects a new font. However, it seems foo() is only executed once on initialization.
let fontPicker = new FontPicker(
'keysdgjlkjsdg', // Google API key
'Open Sans', // default font
{limit: 20},
foo()
);
function foo() {
console.log ('font changed')
}
Let me know if you'd like a fiddle.
Hi,
it would be great if we can search in Google Fonts library for font by its name. Like, the picker has an input for search, and when I type in something, it will returns all the font including that string.
Thanks.
Hello. Is it correct? When after init of fontPicker I try to set font:
const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
fontPicker.setActiveFont("Ubuntu");
I get this:
FontPicker.js:1 Uncaught TypeError: Cannot read property 'classList' of undefined at t.value (FontPicker.js:1)
Google Chrome (the last version) Version 76.0.3809.100 (Offizieller Build) (64-Bit)
p.s. Getter is works.
Hello,
I am currently working on a project where many pieces of text can use different fonts thus instances of the Font picker can be constructed a lot time within my UI, requesting google fonts any time it happens.
Is there a way to request google fonts only once for any number of picker ?
Thanks.
I'm unable to get fontpicker.js to recognize
Hi,
Thanks for a great library! I noticed that this line:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.