Added feature in Preferences to allow user to chose the font of the page by jtnguyen45 · Pull Request #1962

Added feature in Preferences to allow user to chose the font of the page by jtnguyen45 · Pull Request #1962 · freeCodeCamp/devdocs

Conversation

Created a drop down of font options that allows the user to chose the type of font used for the app, within the Preferences page. The font changes the entire page automatically when user clicks on a font option. I chose 5 fonts randomly (Arial, Cascadia, Fira Code, Proxima Nova, Verdana) but can change them to different fonts easily if desired.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks to working on this feature. I've left a few suggestions/questions.

		@updateColorMeta()
		return

		setFont: (font) ->

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're missing a @setFont(@get('font')) in line 141?

Comment on lines +27 to +31

		<option value="arial" #{if (settings.font == 'Arial' or not settings.font) then ' selected' else ''}>Arial (default)</option>
		<option value="cascadia" #{if settings.font == 'Cascadia' then ' selected' else ''}>Cascadia</option>
		<option value="fira-code" #{if settings.font == 'Fira Code' then ' selected' else ''}>Fira Code</option>
		<option value="proxima-nova" #{if settings.font == 'Proxima Nova' then ' selected' else ''}>Proxima Nova</option>
		<option value="verdana" #{if settings.font == 'Verdana' then ' selected' else ''}>Verdana</option>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't get the selection of the fonts. Some seem to be targetting the user interface (such as Arial). Some seem to be targetting the code blocks (such as Fira Code)?

		font-size: 1em;
		font-weight: normal;
		font-family: $baseFont;
		font-family: var(--selectedFont, $baseFont);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In _variables.scss, we already define the variables --baseFont and --monoFont – I think we should re-use them instead of introducing another one.

Conversation

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

2 participants