-
Author
-
July 12, 2018 at 11:15 #203661msteimannParticipant
Hello, I am trying to figure out how to embed Google Fonts GDPR compliant. I would have to upload and retrieve them locally from my server, but could not find a plugin which corresponds with the Kleo theme font options. Suggestions to solve the issue would be much appreciated.
July 13, 2018 at 03:30 #203721LauraModeratorHello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
July 13, 2018 at 18:25 #203786RaduModeratorHi,
You can add the next function into child theme functions.php fileCOPY CODE/* Deqeue the google fonts */ function sq7r_deque_kleo_gogole_fonts() { if( function_exists('bp_is_active') && !bp_is_members_component()) { wp_deregister_style('kleo-google-fonts', $google_link, array(), '', 'all' ); wp_dequeue_style('kleo-google-fonts'); } } add_action('wp_enqueue_scripts', 'sq7r_deque_kleo_gogole_fonts',999);
It will prevent google fonts loading also you can go to wp-admin -> theme options -> fonts -> and to set for every heading Arial font a standard one.
Then, you can load and set any font you want to following this method follow this : https://archived.seventhqueen.com/forums/topic/how-can-register-japanese-font/#post-106881
Cheers
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionJanuary 31, 2019 at 19:27 #217711msteimannParticipantHello Laura and Radu,
it’s been some time since I have opened this topic. I had to give my project a little rest, but now I’m back on track again and would like to give you and anybody else a brief update.
I finally seem to have managed to embed my preferred google fonts locally. This is how I achieved it:
1. Downloaded the desired fonts an CSS code from: https://google-webfonts-helper.herokuapp.com/fonts
2. Created two folders with the name „fonts“, put all the font files from my just downloaded font folder into each of them, copied one in my WordPress root directory and the other into „wp-content/themes/“, so that I have 2 folders with the name „fonts“ containing all the google fonts in the two different directories. (Did this, because I noticed a syntax error which stated that the fonts folder in the „wp-content/themes/“ is missing.)
3. Switched all my fonts to Helvetica in the KLEO Child Theme settings.
4. Added this code to the child’s function.php:
COPY CODE/* Deqeue the google fonts */ function sq7r_deque_kleo_gogole_fonts() { if( function_exists('bp_is_active') && !bp_is_members_component()) { wp_deregister_style('kleo-google-fonts', $google_link, array(), '', 'all' ); wp_dequeue_style('kleo-google-fonts'); } } add_action('wp_enqueue_scripts', 'sq7r_deque_kleo_gogole_fonts',999); /** * Google fonts locally */ add_action('wp_head','Kleo_hook_font'); function Kleo_hook_font() { $output="<link rel='stylesheet' href='https://my-domain.org/wp-content/themes/kleo-child/style.css' type='text/css' media='all' />"; echo $output; }
5. Added this code (partly the copied @font-face code from the google fonts helper website, i.e from top until h1,h2,…) to the child’s style.css:
COPY CODE/* roboto-condensed-300 - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; src: url('../fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url('../fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } /* roboto-condensed-regular - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: url('../fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('../fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } /* roboto-condensed-700 - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; src: url('../fonts/roboto-condensed-v16-latin-700.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url('../fonts/roboto-condensed-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto-condensed-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto-condensed-v16-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto-condensed-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-condensed-v16-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } /* didact-gothic-regular - latin */ @font-face { font-family: 'Didact Gothic'; font-style: normal; font-weight: 400; src: url('../fonts/didact-gothic-v12-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Didact Gothic Regular'), local('DidactGothic-Regular'), url('../fonts/didact-gothic-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/didact-gothic-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/didact-gothic-v12-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/didact-gothic-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/didact-gothic-v12-latin-regular.svg#DidactGothic') format('svg'); /* Legacy iOS */ } h1,h2,h3,h4,h5,h5 { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; } body { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; } a,b { font-family: 'Didact Gothic'; font-style: normal; font-weight: 400; }
6. Sat back and smiled.
Two last questions:
A) Which part of the fonts occurring on my website are styled by „a,b“?
B) And if I only wanted my Header/Menu fonts to be font-family: ‘Didact Gothic’;, how would I have to alter the CSS to achieve this?
Regards,
MartinFebruary 1, 2019 at 16:50 #217793RaduModeratorHi,
That’s great !
A, All of them should be , excepting where the a and b tag it’s targeted more specific with a selector similar to this one .footer a {} it will overwrite the a, you can try to apply css rule like this.
COPY CODEbody * a {color:red !important} html * a {color:red !important}
B. Using a selector like this one
COPY CODE.navbar-nav > li > a {font-family: 'Didact Gothic !important';}
Cheers
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionFebruary 1, 2019 at 18:39 #217812msteimannParticipantThank you for explaining the CSS rules! This topic is now resolved.
Best,
MartinFebruary 4, 2019 at 15:16 #218015RaduModeratorGreat!
Have a nice week
Cheers
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution -
AuthorPosts
The forum ‘General questions’ is closed to new topics and replies.