Exit

FontPicker — Easy Google Fonts

FontPicker — Easy Google Fonts is disabledenabled.

Fonts

Edit font

Just a name. Visible in the backend only.

Elements

Custom elements

Settings

Swap
The browser will initially show a system font, then once your font has downloaded it will swap the fonts.
Override all of the styles for the selectors above in your theme's stylesheet. Learn more

Typography

Take your customization to the next level with font size, color, line height and more…
24
0.8
0px
—
—
Center
—

Drop cap

Show large initial letter.
72

Text shadow

Add shadow to text.
0px
0px
10px

Advanced

TOP
RIGHT
BOTTOM
LEFT
TOP
RIGHT
BOTTOM
LEFT
—

Background

Set the margin area on all four sides of an element at once.
Classic
You can upload, manage, and delete files from the Files page in Shopify.
Top center
Default
No-repeat
Cover
0%
100%
Radial
220deg
Top right

Border

Set an element's border.
Classic
Solid
PX
TOP
RIGHT
BOTTOM
LEFT
1px
0%
100%
Radial
220deg
Top right

Border radius

Round the corners of an element's outer border edge.
TOP
RIGHT
BOTTOM
LEFT

Box shadow

Add shadow effects around an element's frame.
0px
0px
10px
0px
Outline

Position

Set how an element is positioned in a document.

Please note!

Custom positioning is not considered best practice for responsive web design and should not be used too frequently.

Absolute
Left
0
Top
0

Width

Set an element's width.
Full width (100%)
1000

Custom CSS

Add your own custom CSS.
Use "selector" to target wrapper element.
  • Examples:

    • selector {color: red;}

      // For main element

    • selector .child-element {margin: 10px;}

      // For child element

    • .my-class {text-align: center;}

      // Or use any custom selector

Edit font

Just a name. Visible in the backend only.

Elements

Custom elements

Settings

Swap
The browser will initially show a system font, then once your font has downloaded it will swap the fonts.
Override all of the styles for the selectors above in your theme's stylesheet. Learn more

Typography

Take your customization to the next level with font size, color, line height and more…
14
1.2
0.5px
Uppercase
—
—
—

Drop cap

Show large initial letter.
32

Text shadow

Add shadow to text.
0px
0px
10px

Advanced

TOP
RIGHT
BOTTOM
LEFT
TOP
RIGHT
BOTTOM
LEFT
—

Background

Set the margin area on all four sides of an element at once.
Gradient
You can upload, manage, and delete files from the Files page in Shopify.
Center center
Scroll
No-repeat
Auto
0%
100%
Linear
45deg
Top right

Border

Set an element's border.
Gradient
Solid
PX
TOP
RIGHT
BOTTOM
LEFT
3px
0%
100%
Linear
45deg
Top right

Border radius

Round the corners of an element's outer border edge.
TOP
RIGHT
BOTTOM
LEFT

Box shadow

Add shadow effects around an element's frame.
0px
0px
10px
0px
Outline

Position

Set how an element is positioned in a document.

Please note!

Custom positioning is not considered best practice for responsive web design and should not be used too frequently.

Absolute
Left
0
Top
0

Width

Set an element's width.
Full width (100%)
1000

Custom CSS

Add your own custom CSS.
Use "selector" to target wrapper element.
  • Examples:

    • selector {color: red;}

      // For main element

    • selector .child-element {margin: 10px;}

      // For child element

    • .my-class {text-align: center;}

      // Or use any custom selector

Edit font

Just a name. Visible in the backend only.

Elements

Custom elements

Settings

Swap
The browser will initially show a system font, then once your font has downloaded it will swap the fonts.
Override all of the styles for the selectors above in your theme's stylesheet. Learn more

Typography

Take your customization to the next level with font size, color, line height and more…
16
1.2
0.5px
Uppercase
—
—
—

Drop cap

Show large initial letter.
32

Text shadow

Add shadow to text.
0px
0px
10px

Advanced

TOP
RIGHT
BOTTOM
LEFT
TOP
RIGHT
BOTTOM
LEFT
—

Background

Set the margin area on all four sides of an element at once.
Classic
You can upload, manage, and delete files from the Files page in Shopify.
Center center
Scroll
No-repeat
Auto
0%
100%
Linear
45deg
Top right

Border

Set an element's border.
Gradient
Solid
PX
TOP
RIGHT
BOTTOM
LEFT
3px
0%
100%
Linear
45deg
Top right

Border radius

Round the corners of an element's outer border edge.
TOP
RIGHT
BOTTOM
LEFT

Box shadow

Add shadow effects around an element's frame.
-20px
20px
4px
0px
Outline

Position

Set how an element is positioned in a document.

Please note!

Custom positioning is not considered best practice for responsive web design and should not be used too frequently.

Absolute
Left
0
Top
0

Width

Set an element's width.
Full width (100%)
1000

Custom CSS

Add your own custom CSS.
Use "selector" to target wrapper element.
  • Examples:

    • selector {color: red;}

      // For main element

    • selector .child-element {margin: 10px;}

      // For child element

    • .my-class {text-align: center;}

      // Or use any custom selector

Edit font

Just a name. Visible in the backend only.

Elements

Custom elements

Settings

Swap
The browser will initially show a system font, then once your font has downloaded it will swap the fonts.
Override all of the styles for the selectors above in your theme's stylesheet. Learn more

Typography

Take your customization to the next level with font size, color, line height and more…
14
1
0px
—
—
—
—

Drop cap

Show large initial letter.
32

Text shadow

Add shadow to text.
0px
0px
10px

Advanced

TOP
RIGHT
BOTTOM
LEFT
TOP
RIGHT
BOTTOM
LEFT
—

Background

Set the margin area on all four sides of an element at once.
Classic
You can upload, manage, and delete files from the Files page in Shopify.
Center center
Scroll
No-repeat
Auto
0%
100%
Radial
220deg
Top right

Border

Set an element's border.
Classic
Solid
PX
TOP
RIGHT
BOTTOM
LEFT
1px
0%
100%
Radial
220deg
Top right

Border radius

Round the corners of an element's outer border edge.
TOP
RIGHT
BOTTOM
LEFT

Box shadow

Add shadow effects around an element's frame.
0px
0px
10px
0px
Outline

Position

Set how an element is positioned in a document.

Please note!

Custom positioning is not considered best practice for responsive web design and should not be used too frequently.

Absolute
Left
0
Top
0

Width

Set an element's width.
Full width (100%)
1000

Custom CSS

Add your own custom CSS.
Use "selector" to target wrapper element.
  • Examples:

    • selector {color: red;}

      // For main element

    • selector .child-element {margin: 10px;}

      // For child element

    • .my-class {text-align: center;}

      // Or use any custom selector

Edit font

Just a name. Visible in the backend only.

Elements

Custom elements

Settings

Swap
The browser will initially show a system font, then once your font has downloaded it will swap the fonts.
Override all of the styles for the selectors above in your theme's stylesheet. Learn more

Typography

Take your customization to the next level with font size, color, line height and more…
18
1.4
0px
—
—
—
—

Drop cap

Show large initial letter.
32

Text shadow

Add shadow to text.
0px
0px
10px

Advanced

TOP
RIGHT
BOTTOM
LEFT
TOP
RIGHT
BOTTOM
LEFT
—

Background

Set the margin area on all four sides of an element at once.
Classic
You can upload, manage, and delete files from the Files page in Shopify.
Center center
Scroll
No-repeat
Auto
0%
100%
Radial
220deg
Top right

Border

Set an element's border.
Classic
Solid
PX
TOP
RIGHT
BOTTOM
LEFT
1px
0%
100%
Radial
220deg
Top right

Border radius

Round the corners of an element's outer border edge.
TOP
RIGHT
BOTTOM
LEFT

Box shadow

Add shadow effects around an element's frame.
0px
4px
0px
0px
Outline

Position

Set how an element is positioned in a document.

Please note!

Custom positioning is not considered best practice for responsive web design and should not be used too frequently.

Absolute
Left
0
Top
0

Width

Set an element's width.
Full width (100%)
1000

Custom CSS

Add your own custom CSS.
Use "selector" to target wrapper element.
  • Examples:

    • selector {color: red;}

      // For main element

    • selector .child-element {margin: 10px;}

      // For child element

    • .my-class {text-align: center;}

      // Or use any custom selector

Edit font

Just a name. Visible in the backend only.

Elements

Custom elements

Settings

Swap
The browser will initially show a system font, then once your font has downloaded it will swap the fonts.
Override all of the styles for the selectors above in your theme's stylesheet. Learn more

Typography

Take your customization to the next level with font size, color, line height and more…
18
1.2
2px
—
—
—
—

Drop cap

Show large initial letter.
32

Text shadow

Add shadow to text.
0px
0px
10px

Advanced

TOP
RIGHT
BOTTOM
LEFT
TOP
RIGHT
BOTTOM
LEFT
—

Background

Set the margin area on all four sides of an element at once.
Gradient
You can upload, manage, and delete files from the Files page in Shopify.
Center center
Scroll
No-repeat
Auto
0%
100%
Linear
90deg
Top right

Border

Set an element's border.
Gradient
Solid
PX
TOP
RIGHT
BOTTOM
LEFT
3px
0%
100%
Linear
45deg
Top right

Border radius

Round the corners of an element's outer border edge.
TOP
RIGHT
BOTTOM
LEFT

Box shadow

Add shadow effects around an element's frame.
0px
3px
0px
0px
Inset

Position

Set how an element is positioned in a document.

Please note!

Custom positioning is not considered best practice for responsive web design and should not be used too frequently.

Absolute
Left
0
Top
0

Width

Set an element's width.
Full width (100%)
1000

Custom CSS

Add your own custom CSS.
Use "selector" to target wrapper element.
  • Examples:

    • selector {color: red;}

      // For main element

    • selector .child-element {margin: 10px;}

      // For child element

    • .my-class {text-align: center;}

      // Or use any custom selector

Login Required

Unfortunately, this feature is not available in the demo. You should see it after installing the app into your store.

Log in

Or you can take a look on the video below to see how it works in action.