diff --git a/assets/src/edit-story/app/font/actions/useLoadFontFiles.js b/assets/src/edit-story/app/font/actions/useLoadFontFiles.js index 774a9cdd2b4e..8ba609f5cedc 100644 --- a/assets/src/edit-story/app/font/actions/useLoadFontFiles.js +++ b/assets/src/edit-story/app/font/actions/useLoadFontFiles.js @@ -55,6 +55,7 @@ function useLoadFontFiles() { font: { family, service, variants }, fontWeight, isItalic, + content, }) => { if (!family || service !== 'fonts.google.com') { return null; @@ -89,8 +90,8 @@ function useLoadFontFiles() { const ensureFontLoaded = async () => { if (document?.fonts) { - await document.fonts.load(fontFaceSet); - return document.fonts.check(fontFaceSet); + await document.fonts.load(fontFaceSet, content || ''); + return document.fonts.check(fontFaceSet, content || ''); } else { return null; } diff --git a/assets/src/edit-story/app/font/test/actions/useLoadFontFiles.js b/assets/src/edit-story/app/font/test/actions/useLoadFontFiles.js index 1be1b8507b69..cd6e9fcb5ac0 100644 --- a/assets/src/edit-story/app/font/test/actions/useLoadFontFiles.js +++ b/assets/src/edit-story/app/font/test/actions/useLoadFontFiles.js @@ -30,7 +30,8 @@ const DEFAULT_FONT = { service: 'fonts.google.com', }, fontWeight: 400, - fontStyle: 'normal', + isItalic: true, + content: 'Fill in some text', }; describe('useLoadFontFiles', () => { diff --git a/assets/src/edit-story/components/library/text/fontPreview.js b/assets/src/edit-story/components/library/text/fontPreview.js index 6e96b08eea47..1cdd958f2073 100644 --- a/assets/src/edit-story/components/library/text/fontPreview.js +++ b/assets/src/edit-story/components/library/text/fontPreview.js @@ -53,14 +53,7 @@ const Text = styled.span` color: ${({ theme }) => theme.colors.fg.v1}; `; -function FontPreview({ - title, - font, - fontSize, - fontWeight, - fontStyle, - onClick, -}) { +function FontPreview({ title, font, fontSize, fontWeight, content, onClick }) { const { actions: { maybeEnqueueFontStyle }, } = useFont(); @@ -70,10 +63,10 @@ function FontPreview({ { font, fontWeight, - fontStyle, + content, }, ]); - }, [font, fontWeight, fontStyle, maybeEnqueueFontStyle]); + }, [font, fontWeight, content, maybeEnqueueFontStyle]); return ( @@ -93,7 +86,7 @@ FontPreview.propTypes = { font: FontPropType, fontSize: PropTypes.number, fontWeight: PropTypes.number, - fontStyle: PropTypes.string, + content: PropTypes.string, onClick: PropTypes.func, }; diff --git a/assets/src/edit-story/components/panels/textStyle/font.js b/assets/src/edit-story/components/panels/textStyle/font.js index cd514bc57e74..60e622b96ce7 100644 --- a/assets/src/edit-story/components/panels/textStyle/font.js +++ b/assets/src/edit-story/components/panels/textStyle/font.js @@ -90,10 +90,11 @@ function FontControls({ selectedElements, pushUpdate }) { }; await maybeEnqueueFontStyle( - selectedElements.map(() => ({ + selectedElements.map(({ content }) => ({ font: newFont, isItalic, fontWeight, + content, })) ); @@ -118,10 +119,11 @@ function FontControls({ selectedElements, pushUpdate }) { value={fontWeight} onChange={async (value) => { await maybeEnqueueFontStyle( - selectedElements.map(({ font }) => ({ + selectedElements.map(({ font, content }) => ({ font, isItalic, fontWeight: parseInt(value), + content, })) ); handleSelectFontWeight(value); diff --git a/assets/src/edit-story/components/panels/textStyle/textStyle.js b/assets/src/edit-story/components/panels/textStyle/textStyle.js index a048ef2e0821..78eb1a2a3751 100644 --- a/assets/src/edit-story/components/panels/textStyle/textStyle.js +++ b/assets/src/edit-story/components/panels/textStyle/textStyle.js @@ -143,10 +143,11 @@ function StylePanel({ selectedElements, pushUpdate }) { iconHeight={10} onChange={async (value) => { await maybeEnqueueFontStyle( - selectedElements.map(({ font }) => ({ + selectedElements.map(({ font, content }) => ({ font, isItalic: value, fontWeight, + content, })) ); handleClickItalic(value); diff --git a/assets/src/edit-story/elements/text/display.js b/assets/src/edit-story/elements/text/display.js index 4c6be2a2757b..f902d8d46227 100644 --- a/assets/src/edit-story/elements/text/display.js +++ b/assets/src/edit-story/elements/text/display.js @@ -125,9 +125,10 @@ function TextDisplay({ font, fontWeight, isItalic, + content, }, ]); - }, [font, fontWeight, isItalic, maybeEnqueueFontStyle]); + }, [font, fontWeight, isItalic, content, maybeEnqueueFontStyle]); useTransformHandler(id, (transform) => { const target = ref.current; diff --git a/assets/src/edit-story/elements/text/edit.js b/assets/src/edit-story/elements/text/edit.js index 3aa58487da18..279d86a0709d 100644 --- a/assets/src/edit-story/elements/text/edit.js +++ b/assets/src/edit-story/elements/text/edit.js @@ -214,9 +214,10 @@ function TextEdit({ font, fontWeight, isItalic, + content, }, ]); - }, [font, fontWeight, isItalic, maybeEnqueueFontStyle]); + }, [font, fontWeight, isItalic, content, maybeEnqueueFontStyle]); return (