- This topic has 2 replies, 3 voices, and was last updated 6 years, 7 months ago by Sarah.
-
AuthorPosts
-
August 15, 2017 at 8:01 am #366386Roman
Hello,
how i can add a custom font for child theme in a true way.
I have a fonts folder with my custom fonts.
example:
/fonts/Gilroy-Light, Gilroy-Regular, Gilroy-Medium, Gilroy-Semibold, Gilroy-Bold
/fonts/fonts.css@font-face { font-family: 'Gilroy-Light'; src: url('./Gilroy-Light.eot'); src: url('./Gilroy-Light.eot?#iefix') format('embedded-opentype'), url('./Gilroy-Light.woff') format('woff'), url('./Gilroy-Light.ttf') format('truetype'), url('./Gilroy-Light.svg#Gilroy-Light') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Gilroy-Regular'; src: url('./Gilroy-Regular.eot'); src: url('./Gilroy-Regular.eot?#iefix') format('embedded-opentype'), url('./Gilroy-Regular.woff') format('woff'), url('./Gilroy-Regular.ttf') format('truetype'), url('./Gilroy-Regular.svg#Gilroy-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Gilroy-Medium'; src: url('./Gilroy-Medium.eot'); src: url('./Gilroy-Medium.eot?#iefix') format('embedded-opentype'), url('./Gilroy-Medium.woff') format('woff'), url('./Gilroy-Medium.ttf') format('truetype'), url('./Gilroy-Medium.svg#Gilroy-Medium') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gilroy-Semibold'; src: url('Gilroy-Semibold.eot'); src: url('Gilroy-Semibold.eot?#iefix') format('embedded-opentype'), url('Gilroy-Semibold.woff') format('woff'), url('Gilroy-Semibold.ttf') format('truetype'), url('Gilroy-Semibold.svg#Gilroy-Semibold') format('svg'); font-weight: 600; font-style: normal; }
add to function this css
function gpc_css_stylesheets() { wp_enqueue_style( 'gp_font', get_stylesheet_directory_uri() . '/fonts/fonts.css'); } add_action('wp_enqueue_scripts','gpc_css_stylesheets');
I want to add this fonts to a customizer with choice font weight.
For example:
Ill choice a font family like Gilroy then select a font weight, 300 – Light, 400 – Regular, 500 – Medium, 600 – Semibold.
What i need to change in fonts.css for working solution ?I add this in function to show font in a customizer, but im not sure its true way or not. In this case i need to add all fonts Gilroy-Light, Gilroy-Regular, Gilroy-Medium, Gilroy-Semibold, Gilroy-Bold or just one like Gilroy, then use a font weight ? Or for any font weight use specific name ?
add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' ); function tu_add_system_fonts( $fonts ) { $fonts[] = 'Gilroy-Regular'; return $fonts; }
August 15, 2017 at 8:55 am #366447TomLead DeveloperLead DeveloperYes, that looks like the correct method. Since all of the font weights are added using different font files, you would need to add them separately:
$fonts[] = 'Gilroy-Regular'; $fonts[] = 'Gilroy-Medium';
And so on..
August 21, 2017 at 12:24 pm #370656SarahRoman, you, my friend are wonderful! This works perfectly and is just what I needed!
Thank you!
-
AuthorPosts
- You must be logged in to reply to this topic.