Comment on page
Google/Custom Fonts and GDPR
Site administration -> Appearance -> Space -> Advanced settings -> Font files
2. TTF, OTF, WOFF, WOFF2 or SVG Converter
Learn more How to use @font-face in CSS -> https://css-tricks.com/snippets/css/using-font-face-in-css/
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Change 'YOURURL' to the real one eg. for local environment:
- localhost/....
- https://url.com/...
@font-face {
font-family: 'Poppins', Arial, Helvetica, sans-seri;
src: url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.eot');
src: url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.woff2') format('woff2'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.woff') format('woff'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins', Arial, Helvetica, sans-seri;
src: url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.eot');
src: url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.woff2') format('woff2'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.woff') format('woff'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins', Arial, Helvetica, sans-seri;
src: url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.eot');
src: url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.woff2') format('woff2'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.woff') format('woff'),
url('YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
}
Go to Google or DuckDuckGo and search e.g "google fonts poppins github"
- 1.Get your custom/Google font. The layout is based on 3 font weights. Regular (400), Medium (500 or 600), Bold (700, 800 or 900). a. If you are using italic style, then you have to upload italic font variants for all font weights.
- 2.Sometimes, users don't want to use medium weight. If it is your case, remember to set the Font weight: Medium to 400 (Customization -> Google Font -> Font weight: Medium)
- 3.Set the Font Name (Space - Customization - Google Font - Font Name (Body))
- 4.Upload the font package (Space -> Advanced -> Font files)
- 6.Save changes