-
Posts
-
I recently purchased your theme and find its features amazing! But I do have a question regarding Google Fonts.
I have searched the forums and am confused as to how to add Google Fonts to the <HEAD> tag. I want to call specific fonts through CSS for a specific headers not add them to the General Styling list. I want to add the font, Alex Brush and call it through CSS using the Child Theme and the stylesheet. But in order to do that, I need to insert the following line of code in the <HEAD> tag:
<link href=’http://fonts.googleapis.com/css?family=Alex+Brush’ rel=’stylesheet’ type=’text/css’>
How do I add this line of code to the <HEAD> tag?
Hi Geekcheck!
Please refer to Ismael’s post here – https://kriesi.at/support/topic/add-new-font/#post-234710
You can find <head> tag in Appearance > Editor > Header.php file.Cheers!
YigitThis adds the font to the General Styling list, but doesn’t allow me to call to it as a CSS class. For example, I have the following CSS class, I use for specific text in special cases:
.fancy-1 { font-family:'Alex Brush', cursive; font-size: 2em; }Normally I would insert this into <HEAD> tag and then call to it from the stylesheet. But in order to do that I need to add it to the <HEAD> tag. Is there a way to dynamically add this to the <HEAD> tag without having to directly edit the file? I only ask, because in the event of an update, I would have to re-add that line of code again.
Hi!
You can add this code to the quick css field (Enfold > Theme Options) or into the child theme style.css file. There’s no need to add it to the head section directly. If you really want to print the code directly you can insert this code into the functions.php file:
function my_custom_js() { echo '<style> .fancy-1 { font-family:"Alex Brush", cursive; font-size: 2em; }</style>'; } add_action('wp_head', 'my_custom_js');Cheers!
PeterThis partially works, but I think I may need to be more clear in my explanation. I apologize for the confusion. Let me start over and be a little more clear so you understand what I am trying to do.
I am using the Enfold Child Theme so I can use custom CSS to style certain text for my website using Google Fonts. I want to insert the following line of code from Google Fonts into the <HEAD> tag:
<link href=’http://fonts.googleapis.com/css?family=Alex+Brush’ rel=’stylesheet’ type=’text/css’>After doing this, it allows me to create a class in the CSS stylesheet and use it as such. For example, I want to use the Alex Brush font to style specific text using the following CSS code:
.fancy-1 { font-family:'Alex Brush', cursive; font-size: 2em; }What is the best method, using the Enfold Child Theme to accomplish this?
Hey!
Try to use this code instead:
function avia_custom_css() { echo '<link href="http://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet" type="text/css">'; echo '<style> .fancy-1 { font-family:"Alex Brush", cursive; font-size: 2em; }</style>'; } add_action('wp_head', 'avia_custom_css');Cheers!
PeterThat works! Thank you Thank you! Thank you!
If I wanted to add other CSS classes based on this font, would I just add it below the first class? For example:
function avia_custom_css() { echo '<link href="http://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet" type="text/css">'; echo '<style> .fancy-1 { font-family:"Alex Brush", cursive; font-size: 2em; } .fancy-2 { font-family:"Alex Brush", cursive; font-size: 5em; </style>'; } add_action('wp_head', 'avia_custom_css');
- You must be logged in to reply to this topic.