Yikes, that’s a lot to download! Add more weights or more fonts and the file size quickly gets out of control. If you need an additional weight like bold (700), which 9 of the 12 fonts above provide, the file size quickly increases to 293 kb. Keep in mind that these numbers are for WOFF2 font files, which are smaller in file size than all other web font file formats. As you will be modifying this file directly, and not through a custom override, you will likely lose these changes during an update.Īdd the local font files to THEME_DIR/custom/fonts/.173 kb is not terrible for 12 web fonts, but it is still a lot to download. Duplicate the TEMPLATE_DIR/gantry/theme.yaml file and place the copy in a safe place if you haven't done so already.In general, 400 is a normal weight, 700 is bold, etc. The numbers listed here are the font weight. fonts:ħ00italic: 'gantry-theme://fonts/gaspar/gaspar_bold/gaspar-bolditalic-webfont'ħ00: 'gantry-theme://fonts/gaspar/gaspar_bold/gaspar-bold-webfont'Ĥ00italic: 'gantry-theme://fonts/gaspar/gaspar_bold/gaspar-italic-webfont'Ĥ00: 'gantry-theme://fonts/gaspar/gaspar_bold/gaspar-regular-webfont' To add the Gaspar font, the fonts section of the YAML file will look like this. Using the Helium template as an example, this is what the theme.yaml file looks like by default.ĩ00italic: 'gantry-theme://fonts/raleway/raleway-blackitalic/raleway-blackitalic-webfont'ĩ00: 'gantry-theme://fonts/raleway/raleway-black/raleway-black-webfont'ħ00italic: 'gantry-theme://fonts/raleway/raleway-bold/raleway-bolditalic-webfont'ħ00: 'gantry-theme://fonts/raleway/raleway-bold/raleway-bold-webfont'Ħ00italic: 'gantry-theme://fonts/raleway/raleway-semibolditalic/raleway-semibolditalic-webfont'Ħ00: 'gantry-theme://fonts/raleway/raleway-semibold/raleway-semibold-webfont'ĥ00italic: 'gantry-theme://fonts/raleway/raleway-mediumitalic/raleway-mediumitalic-webfont'ĥ00: 'gantry-theme://fonts/raleway/raleway-medium/raleway-medium-webfont'Ĥ00italic: 'gantry-theme://fonts/raleway/raleway-italic/raleway-italic-webfont'Ĥ00: 'gantry-theme://fonts/raleway/raleway-regular/raleway-regular-webfont'Ģ00italic: 'gantry-theme://fonts/raleway/raleway-lightitalic/raleway-lightitalic-webfont'Ģ00: 'gantry-theme://fonts/raleway/raleway-light/raleway-light-webfont'ĩ00italic: 'gantry-theme://fonts/lato/lato-blackitalic/lato-blackitalic-webfont'ĩ00: 'gantry-theme://fonts/lato/lato-black/lato-black-webfont'ħ00italic: 'gantry-theme://fonts/lato/lato-bold/lato-bolditalic-webfont'ħ00: 'gantry-theme://fonts/lato/lato-bold/lato-bold-webfont'Ĥ00italic: 'gantry-theme://fonts/lato/lato-italic/lato-italic-webfont'Ĥ00: 'gantry-theme://fonts/lato/lato-regular/lato-regular-webfont'Ģ00italic: 'gantry-theme://fonts/lato/lato-lightitalic/lato-lightitalic-webfont'Ģ00: 'gantry-theme://fonts/lato/lato-light/lato-light-webfont' Once this is done, you can add your new font to the YAML in the fonts section. Next, add the local font files to TEMPLATE_DIR/custom/fonts/. For example, you can rename Gaspar Bold-webfont.woff to gaspar-bold-webfont.woff. This will further make your life easier as you reference these files in the YAML.
Eliminating spaces, making everything lowercase, etc. You will also want to rename the subdirectories and files so they're web friendly. This will make life easier for you in the next step as organizing multiple uploaded web fonts will be simpler. The first thing you will want to do is rename the Web Fonts subfolder in the web fonts directory to gaspar.
#FONT PICKER HOW TO#
How to Create a Child Theme (WordPress).How to Load CSS / SCSS / JS / HTML from Twig.Creating a Multilingual Site (WordPress).
0 kommentar(er)
