Customize
Exit
FontPicker — Easy Google Fonts
Save
FontPicker — Easy Google Fonts is
disabled
enabled
.
Enable
Disable
Fonts
Parisienne
Google font
Josefin Sans
Google font
Open Sans
Google font
Montserrat
Google font
Roboto
Google font
Lato
Google font
Add new
Google font
Custom font
Edit font
General
Style
Advanced
Title
Just a name. Visible in the backend only.
Font
Change
Elements
Body (body tags)
Headline 1 (h1 tags)
Headline 2 (h2 tags)
Headline 3 (h3 tags)
Headline 4 (h4 tags)
Headline 5 (h5 tags)
Headline 6 (h6 tags)
Paragraphs (p tags)
Blockquotes
Lists (li tags)
Hyperlink (a tags)
Bold (strong tag)
Italic (em tag)
Custom elements
?
Define your own elements and the app will build typography settings for you.
Custom elements
Add new
Settings
Font loading behavior
?
Control what happens while a font is loading or otherwise unavailable.
Swap
Block
Fallback
Optional
Swap
The browser will initially show a system font, then once your font has downloaded it will swap the fonts.
Force styles override
?
Apply the CSS !important rule to all font settings.
Override all of the styles for the selectors above in your theme's stylesheet.
Learn more
Remove
Typography
Enable
Take your customization to the next level with font size, color, line height and more…
Text color
Font size
PX
EM
REM
VM
24
Line height
PX
EM
0.8
Letter spacing
0
px
Text transform
—
Uppercase
Lowercase
Capitalize
None
—
Text decoration
—
Underline
Line-through
Overline
None
—
Text align
—
Left
Center
Right
Justify
Center
Font style
—
Normal
Italic
—
Drop cap
Enable
Show large initial letter.
Text color
Font size
PX
EM
REM
VM
72
Text shadow
Enable
Add shadow to text.
Color
Horizontal
0
px
Vertical
0
px
Blur
10
px
Advanced
Margin
?
Set the margin area on all four sides of an element at once.
PX
%
TOP
RIGHT
BOTTOM
LEFT
Padding
?
Set the padding area on all four sides of an element at once.
PX
EM
%
TOP
RIGHT
BOTTOM
LEFT
Z-Index
Display
—
Block
Inline block
—
Background
Enable
Set the margin area on all four sides of an element at once.
Background type
Classic
Gradient
Classic
Color
Use image
URL
You can upload, manage, and delete files from the
Files
page in Shopify.
Position
Default
Center center
Center left
Center right
Top center
Top left
Top right
Bottom center
Bottom left
Bottom right
Top center
Attachment
Default
Scroll
Fixed
Default
Repeat
Default
No-repeat
Repeat
Repeat-x
Repeat-y
No-repeat
Size
Default
Auto
Cover
Contain
Cover
Location
0
%
Second color
Location
100
%
Type
Linear
Radial
Radial
Angle
220
deg
Position
Center center
Center left
Center right
Top center
Top left
Top right
Bottom center
Bottom left
Bottom right
Top right
Border
Enable
Set an element's border.
Border type
Classic
Gradient
Classic
Style
Solid
Dashed
Dotted
Double
Groove
Solid
Width
PX
TOP
RIGHT
BOTTOM
LEFT
Width
1
px
Color
Location
0
%
Second color
Location
100
%
Type
Linear
Radial
Radial
Angle
220
deg
Position
Center center
Center left
Center right
Top center
Top left
Top right
Bottom center
Bottom left
Bottom right
Top right
Border radius
Enable
Round the corners of an element's outer border edge.
Border radius
PX
%
TOP
RIGHT
BOTTOM