The Pull Request aims to improve the user experience by preventing text from showing up on the screen before the custom font ('Permanent Marker') has loaded. This is achieved by setting the visibility of the site banner title to 'hidden' until the font is loaded. A React state hook (isFontLoaded) is used to track the font loading status, and a useEffect hook is implemented to load the font and set the state accordingly. Additionally, a timeout is set to force the state to true after 3 seconds, ensuring that the text becomes visible even if the font fails to load for some reason. The PR also modifies the font loading strategy by changing the font-display property to 'block' in both the CSS and the HTML link element.
Suggestion
The PR seems well-implemented for the intended purpose. However, it might be beneficial to consider the following:
Provide a fallback font that is visually similar to 'Permanent Marker' to minimize the visual impact in case the custom font takes too long to load or fails entirely.
Ensure that the 3-second timeout is an appropriate duration for users with slower connections, as they might still see a flash of unstyled text if the font hasn't loaded by then.
Consider using a more sophisticated font loading strategy, such as using the Font Loading API with document.fonts.load to check if the font is loaded and then applying a class to the body or specific elements to control the visibility of the text.
PR summary
The Pull Request aims to improve the user experience by preventing text from showing up on the screen before the custom font ('Permanent Marker') has loaded. This is achieved by setting the visibility of the site banner title to 'hidden' until the font is loaded. A React state hook (
isFontLoaded) is used to track the font loading status, and auseEffecthook is implemented to load the font and set the state accordingly. Additionally, a timeout is set to force the state totrueafter 3 seconds, ensuring that the text becomes visible even if the font fails to load for some reason. The PR also modifies the font loading strategy by changing thefont-displayproperty to 'block' in both the CSS and the HTML link element.Suggestion
The PR seems well-implemented for the intended purpose. However, it might be beneficial to consider the following:
document.fonts.loadto check if the font is loaded and then applying a class to the body or specific elements to control the visibility of the text.