bnomei / kirby3-fontselector

Kirby 3 Plugin to select font family and font weight with two synced fields

Kirby 3 Font Selector

Kirby 3 Plugin to select font family and font weight with two synced fields

Commercial Usage

Support open source!

This plugin is free but if you use it in a commercial project please consider to sponsor me or make a donation.
If my work helped you to make some cash it seems fair to me that I might get a little reward as well, right?

Be kind. Share a little. Thanks.

‐ Bruno
 

M	O	N	E	Y
Github sponsor	Patreon	Buy Me a Coffee	Paypal dontation	Hire me

Installation

• unzip master.zip as folder site/plugins/kirby3-fontselector or
• git submodule add https://github.com/bnomei/kirby3-fontselector.git site/plugins/kirby3-fontselector or
• composer require bnomei/kirby3-fontselector

Screenshot

Fonts

Set the fonts you want to use with a config value. You could use a custom JSON file or return a php array.

assets/fonts.json

{
  "fonts": [
    {
      "font": "Merriweather",
      "weight": [
        600,
        700
      ]
    },
    {
      "font": "Montserrat",
      "weight": [
        300,
        400,
        500
      ]
    }
  ]
}

<?php

return [
    'bnomei.fontselector.fonts' => function() {
        return Json::read(kirby()->roots()->assets() . '/fonts.json'),
        // return ['fonts' => [...]];
    },
    // other options
];

Usage

Add the fields to your page blueprint.

site/blueprints/default.yml

fields:
  headlinefont:
    type: fontfamily
    default: Merriweather
    required: true
    
  headlineh1weight:
    type: fontweight
    watchField: headlinefont
    default: 700
    required: true
    
  headlineh2weight:
    type: fontweight
    watchField: headlinefont
    default: 600
    required: true

  copytextfont:
    type: fontfamily
    default: Montserrat
    required: true

  copytextweight:
    type: fontweight
    watchField: copytextfont
    default: 400
    required: true

⚠️ This plugin has by default a 1 minute cache.

Settings

bnomei.fontselector.	Default	Description
fonts	function(){...}	callback to return the fonts array
expire	1	cache will expire n-minutes

Disclaimer

This plugin is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please create a new issue.

License

MIT

It is discouraged to use this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any other form of hate speech.

kirby3-fontselector's Issues

How can I use this in a block?

What do I have to alter in the code to let this plugin support blocks?

When I put the two fields in a page blueprint and inside a block (see below),
the second field is no longer responding to the value of the first field.

I think the lines like this.$store.getters["content/values"]()[this.watchField] in FontWeight.vue need to be adjusted, but I have no clue in which way (being a novice at Vue and Vuex).
Because of the possibility of multiple rows a block can have, there must be some code included to refer to the correct row a field is in, I suppose.

Hopefully you can help!
Thanks, René

# sandbox.yml (partly)
main:
 sections:
  fields:
   type: fields
   fields:
    myblocks:
     label: MijnBlokken
     type: blocks
     fieldsets:
      myDemo:
        wysiwyg: true
        preview: fields
        fields:
          headlinefont:
            type: fontfamily
            default: Merriweather
            required: true
                  
          headlineh1weight:
            type: fontweight
            watchField: headlinefont
            default: 700
            required: true