Add support for loading custom fonts / font family section

[javag97]

Creating an issue for this work to be done. Is there a timeline for this? It may be possible for others(including myself) to take on this work, but I wanted to see if the maintainer here had any thoughts

[rogden]

@javag97 Hey there! Would love the help if you are able and am open to ideas of how to best implement. I have not started work on the feature yet though it has been on the roadmap for a while.

Some initial thoughts:

• We can have a config property that allows the developer to specify the URL of a css file that defines the @font-face rulesets (this would work for Google Fonts for example).
• We can dynamically append a link tag to to define the link tag to load the css file
• I'm not sure how to handle local fonts unless there is already a local server that serve the css file with the @font-face rulesets. Pathing to the font files might get tricky in this scenario as well.
• One note, the config viewer does not load the compiled CSS file from the app/site the developer is building. It simply parses and loads the tailwind.config.js file to generate the UI.

Let me know your thoughts and if you would be interested in working on this feature via a PR.

[ryan-ludwig]

I wonder if this could tie in with running custom plugins (#31). For example, here's how I build out the @font-face rules for Google Fonts within a tailwind project:

// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
	theme: {
		fontFamily: {
			sans: ['Roboto Condensed'],
		},
	},
	plugins: [
		plugin(({ addBase }) => {
			const customFonts = [
				{
					'@font-face': {
						fontFamily: 'Roboto Condensed',
						fontWeight: '300',
						fontStyle: 'italic',
						fontDisplay: 'swap',
						src: 'url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVg2ZhZI2eCN5jzbjEETS9weq8-19eDpCEobdNZUSdy4Q.woff2) format(\'woff\')',
						unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
					},
				},
				{
					'@font-face': {
						fontFamily: 'Roboto Condensed',
						fontWeight: '300',
						fontStyle: 'normal',
						fontDisplay: 'swap',
						src: 'url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCQYb9lecyU.woff2) format(\'woff\')',
						unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
					},
				},
			];
			return addBase(customFonts);
		}),
	],
};

[wmbutler]

I would definitely support this addition.

[acharlop]

Started working on this, the canvas section component was simple enough but font loading is giving me all kinds of problems. Seems like loading fonts after vue loads is an issue. Any other ideas besides generating a combined index.css file?

[rogden]

@acharlop Do you have a draft PR I can look at? What approach did you take? Looking back at #43 (comment) I was hoping to take a css file URI such as the one Google Fonts provides via a config property and dynamically inject a <link rel="stylesheet" href="URI_OF FONT_CSS_FILE.css"> into the head in the mount callback of Canvas.vue (https://github.com/rogden/tailwind-config-viewer/blob/master/src/components/Canvas/Canvas.vue#L119).

[acharlop]

After some sleep I realized I was using a class to apply font styles instead of directly. That did the trick. Should have a PR for you later today

[rogden]

Added in https://github.com/rogden/tailwind-config-viewer/releases/tag/v1.7.0

Thanks @acharlop !