While working on an app for this site, I was looking for a publicly-available font selector input component for Angular and was surprised by how few choices there were. The few choices available were either not working, incomplete in some manner, or required bringing in external dependencies, such as jQuery. Therefore, I've decided to create this component myself from scratch. This component is a purely Angular component which provides functionality for:
- Loading the list of Google fonts, and combining with web safe fonts.
- Allowing the user to select from a drop-down-like list, where each font name renders in its own font.
- Allowing the user to filter the list by prefix.
- Emitting events for hover and user selection.
- Lazy loading all required fonts as they come into view.
After developing, I've made this component open source and installable via npm. In the sections below, I'll outline how to get started with using this component, then outline the behavior and customizability in more detail.
Component Preview
The component below is a preview of the font selector. It takes care of loading the list of fonts, presenting them on click, and dynamically lazy-loading each font as it comes into view. Try it out with a few different selections and observe how it behaves:
This paragraph is rendered with the font selected in the input element above. It will dynamically update as you make different selections.
This paragraph is rendered with the font currently being hovered over in the input element above. It will dynamically update as the hover event changes. If a hover is no longer happening, this will reset to some default value.
ngx-google-fonts
The ngx-google-fonts package contains functionailty for loading, rendering, and allowing the user to select google fonts via drop-down interface. This interface element also contains web-safe fonts. The user can type the first few characters of a name, and the list will update to the fonts which begin with that prefix. The fonts will always appear in alphabetical order. This is a pure Angular implementation; there are no imports for jQuery, bootstrap, etc. The project is open source and is available on:
- Npm Package to directly instlal and use.
- GitHub Project to view the source code and create forks.
To get started now: you can directly install via npm:
Getting Started
To use this component in your project:
- Get a Google API Key: if you haven't already done so, you will need to create a Google account and get an API key. Google's Google Fonts Developer API page can walk you through this process.
- Install @byte-this/ngx-google-fonts, or if you prefer, clone the Git repo and include everything directly within your project.
- Import ByteThisNgxGoogleFontsModule into your module: any module which will use the component must import our library module.
- Add the selector to your html file: byte-this-google-font-selector-input.
The code below shows a simple example where the component is placed with some input and output properties.
Input and Output Properties
For receiving and sending data, the component uses Angular's @Input and @Output properites. The component has two input properties:
Property Name | Required? | Description |
---|---|---|
google-api-key | yes | The component needs a Google Api key to get the list of fonts and relevant information from Google. The component will not begin rendering fonts until a valid google api key is provided. Until it is provided, a text "Fonts Loading..." will appear in its place. |
value | no | This allows for an initial selection to be provided, and it also allows the selected value to be updated at any point afterwords. |
The component exposes two output properties:
Output Event Name | Description |
---|---|
change | When the users selects a different font, this will emit an event of type iGoogleFont which contains information about the selected font. In most cases, font.family is all the consumer needs to work with. |
hover-value | When the user hovers over a font, this will emit an event of type iGoogleFont. This will emit on hover regardless of whether or not the user selects it. This can be useful for preview/demo purposes. |
error | If there is an error loading the fonts, the error object will be emitted in this property. This can be used to hide the component and show an error message if there is an issue. |
CSS Properties
By default, this component provides its own styles for sizes, borders, and text hover effects. If these defaults do not fit, the component also accepts overrides via CSS variables. The preview component at the top of this article uses some overrides to change the hover colors. The table below outlines all css variables the component accepts, their purpose, and their default values. Note that you can use the component without specifying any of these; in that case, it will use all of its default values.
Property Name | Description | Default Value |
---|---|---|
--input-padding | The amount of padding the non-overlay input element should have. | 0.25em |
--input-text-align | The text align for the non-overlay input element. | center |
--selection-background-color | The background color for the overlay element. This is required to cover the contents behind the drop-down overlay. | white |
--selection-background-color-hover | The background color of the particular font entry that the user is hovering over. | lightgray |
--selection-background-color-selected | The background color of the particular font entry that is currently selected. | lightgray |
--selection-width | The width of the overlay element. | 100% |
--selection-height | The height of the overlay element. | 40vh |
--selection-z-index | The z index for the overlay element. This should be high enough to cover all other elements. | 1000 |
--selection-border-color | The border color of the selection overlay. | black |
To set a particular value, you can set an id or classname attribute on the component, then specify the properties in a CSS declaration:
Prefix Selection
This component allows the user to filter the list of fonts by typing a prefix of the font they want to select. For example, if they type the letter "c", the list of fonts will be filtered to only include fonts which start with that letter. To avoid confusion, when the user initially clicks on the list of fonts, the input will clear so that all fonts appear, but it will still scroll to the selected font in the overlay, and the selected value will not change. If the user clicks off of the select without making a selection, the input will be restored to its previous value.
Google Font Data Type
This interface contains information about each Google font as it appears in Google's api response. If the user selects a web safe font in the input element, this data type will stil be emitted, but anything other than family will be an empty string, empty array, or empty object, except for category and kind, which will appear as "Web Safe Font". In most cases, these additional fields will not be needed.
Implementation Details
If you would like to learn more about how the component is implemented, and possibly even make some contributions to the code base, please visit our article which covers the implementation in more detail: