go and visit that nice google fonts helper site: Link
Look for the font you like to implement in your wordpress. Don’t forget to mark all the font-weights you like to have.
Copy/Paste the css codes into a file – name it as : font.css
so f.e. open-sans.css, oxygen.css etc. pp.
Download the zip file and open it.
Now prepare your child theme folder: Create a folder called : assets
in this folder put a css and a fonts folder
put all the fonts downloaded into fonts-folder
put all the font.css (open-sans.css, oxygen.css etc.pp) into the css-folder
put the css in the css-folder put the fonts into the fonts-folder
yes - please load the Prism script to better visualize the source code.
Ja - lade das Prism script um den Code besser lesen zu können
now go to your child-theme functions.php
for each font you like to have create a new line
even for those Enfold got allready in the list like open-sans – because we want to load it local.
function local_google_fonts() {
wp_enqueue_style( 'Oxygen', get_stylesheet_directory_uri().'/assets/css/oxygen.css' );
wp_enqueue_style( 'Open Sans', get_stylesheet_directory_uri().'/assets/css/open-sans.css' );
}
add_action( 'wp_enqueue_scripts', 'local_google_fonts' );Just for Info:
if you did it this way the fonts will be found with the code you have in your fonts.css:
the code inside the font.css will look like this:
so one folder above that css-folder ( thats indicated by: ../fonts/… ) there is the fonts folder
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans-v15-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../fonts/open-sans-v15-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v15-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v15-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v15-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v15-latin-ext_latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}so on GDPR ( DSGVO in german spoken countries ) reasons it might be nice to only load google fonts localy.
Then you need to disable the Google Fonts support of the theme.
To get rid of Google Font support by WordPress use f.e. this little Plugin :
remove-google-fonts-references
add_action( 'init', 'enfold_customization_switch_fonts' );
function enfold_customization_switch_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}You can allready use now on css your new fonts.
To have the choice to choose them from enfold options (fonts or advanced styles etc) you must do this:
The newly added fonts can be found then at the bottom of the drop-down list on Enfold-Child / General Styling / Fonts
Results:
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Oxygen'] = 'Oxygen:300,400,700';
return $fonts;
}
add_filter( 'avf_available_google_fonts', 'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Oxygen'] = 'Oxygen:300,400,700';
return $fonts;
}if you want the font for both: headings and content you can shorten the code above to:
add_filter( 'avf_google_heading_font', 'avia_add_font');
add_filter( 'avf_available_google_fonts', 'avia_add_font');
function avia_add_font($fonts)
{
$fonts['Oxygen'] = 'Oxygen:300,400,700';
return $fonts;
}