I have fonts from typography.com that I moved to production and uploaded to my AWS S3 Bucket to use on my Wordpress site. I have done everything that typography.com has told me to do, but the fonts still are not being displayed. Has anyone gone through this before and can point me in the right direction? I added an #import statement in style.css in my theme to the url that typography.com gave me. I also have a wp_enqueue function in functions.php that I have uploaded to the S3 server.
add_action( 'wp_head', 'my_fonts' );
function my_fonts(){ ?>
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/7783912/761788/css/fonts.css">
<?php
}
The fonts are still not being displayed. What am I doing wrong?
The proper way to include stylesheets is to use wp_enqueue_style. Using this function will also allow you to declare this font as a dependency for other stylesheets. You should also use the 'wp_enqueue_scripts' hook, as opposed to 'wp_head':
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'typography', '//cloud.typography.com/7783912/761788/css/fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
If you're still having issues at this point, make sure you have the proper permissions to GET this file from the Typography cloud server.
Related
I'm working on a site on which I need to load two Google fonts. In an attempt to keep things moving as efficiently as possible, I would like to combine the loading of both fonts into one request. I've never had a problem with this before. Google generates the path, and I have always just been able to copy it into my functions.php file and register it there. However, doing the same thing this time is not working. The syntax of the string looks a bit different now as well. There used to be a pipe character (|) separating the two fonts in the path that Google would generate, but now there is not. If I split each font into it's own request, everything works fine.
The first snippet provided below is how I'm attempting to register my fonts using the link Google provided with both fonts combined into one request.
function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700' );
wp_enqueue_style( 'my-google-fonts' ); }
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );
I've also tried placing a '|' between 'family' and 'Open' in that string, as I know that's how two fonts in one request used to be separated. No luck there either.
The next snippet is the only way I've gotten the fonts to load properly, which is by splitting them up into multiple requests.
function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700' );
wp_register_style( 'my-google-fonts-2', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;700' );
wp_enqueue_style( 'my-google-fonts' );
wp_enqueue_style( 'my-google-fonts-2' );
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );
Is there something wrong with the combined link Google is providing me? If so, what needs to be changed? If not, what am I doing wrong? Has anyone else run into this problem before? Any help would be very much appreciated.
EDIT:
Since the last Google Font update, you're required to use the following line:
<link rel="preconnect" href="https://fonts.gstatic.com">
Upon selecting the required fonts on Google Fonts, here is the embed snippet they're giving us:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap" rel="stylesheet">
YOU are currently loading your font using the default Google Fonts url from the url bar. Both are not the same (See right ad wrong bellow).
Right = https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap.
Wrong = https://fonts.google.com/specimen/Maven+Pro?query=Maven&sidebar.open=true&selection.family=Maven+Pro:wght#400;700|Open+Sans:wght#300;700.
The proper code snippet will appear on the right side column once you've selected a font on the Google font website.
Loading scripts, stylesheets and fonts from the function.php file is the best practice.
Of course we have to adapt the code snippet given by Google Font to our Wordpress environment.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*/
wp_register_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap' );
wp_enqueue_style( 'google_fonts' );
};
}; ?>
When using CDNs, you want to be sure that the source is available. We can Use #fopen(); to "test" our url and make sure our CDN is working, if not we return a fallback file hosted on our website server.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*
* Check if CDN's url is valid, if not return fallback
*/
$test_google_fonts = #fopen( 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap', 'r' );
if ( $test_google_fonts !== false ) {
wp_register_style( 'google_fonts', '//fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap' );
} else {
wp_register_style( 'google_fonts', get_stylesheet_uri() . '/assets/font/_my_awesome_font_fallback_' );
};
wp_enqueue_style( 'google_fonts' );
};
}; ?>
On a side note, if you intend to register and enqueue a script straight away, you don't need to do both, you can jump straight to the enqueuing part.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*/
wp_enqueue_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap' );
};
}; ?>
For anybody else that comes across this issue, the problem was that I had not added this snippet to the <head> within header.php.
<link rel="preconnect" href="https://fonts.gstatic.com">
This was not required before, and I'm not sure exactly why it is now, but that solved my problem. All thanks to #amarinediary for pointing it out to me.
I migrated my wordpress site from a shared host to Digitalocean and everything went well except for the Font Awesome icons.
They are showing as blank squares on the live site.
I found the issue to be the required "fa" class for the icons is not showing up. I am using the Avada theme and am brand new to this.
1) I do not know where the CDN link is when I am searching through SFTP files. Can someone tell me where to find it so I can try to re-add the link.
2) Is there another way to automatically have the "fa" class to the icons so they will show up?
3) Any other insight into fixing the issue would be much appreciated.
Add this to your functions.php file:
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts()
{
// add this line
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
// Example styles and scripts
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
alternatively you can add this code to your header.php file:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Let me know if this works or not.
For anyone still having this issue in Wordpress & Avada:
Have had this multiple times, this is how I solved it last time.
Verify that the link is right, checking for typo's in the error link.
Verify that the files of the error link are in place, also check if FTP rights are set right. (755 for folders, 644 for files)
If the fonts still do not show, de-activate themes and plugins and re-activate them.
Goto Avada -> Options -> Performance
Flush Avada cache
I have the similar issue before, every time after migrating the website, the built in font awesome not showing at all, and display the square instead.
Then I go the "theme options" - click the "save" button directly, then hard refresh the page, everything will back to normal.
Or in some case, you need to double check the font awesome version from "theme features", turn on "Font Awesome v4 Compatibility" and turn off "Font Awesome Pro".
Hope that helps.
Some browsers flagged that some http:// links in my page were being blocked as insecure. I looked at my page source and discovered in the header that a WordPress plugin sets up a <link rel='stylesheet' id='... to link in its own stylesheet but it is using the wrong protocol for the URL.
<link rel='stylesheet' id='fbw-css' href='http://wdcb.stcwdc.org/wp-content/plugins/.....
I have looked in the plugin and I can't find where that is being set up.
Is there a way in my theme child's stylesheet or in the functions.php file to override this so it uses https?
I was wondering if something like this might work in my CSS?
link#fbw-css href { url:https://wdcb.stcwdc.org/wp-content/plugins/.....;
}
Or is there a way to do this in a function?
There's a few methods of doing this (as is the WordPress way), but this should get you going for what you need.
Find the stylesheet id, in this case it looks like fbw. Ignore the css suffix here as that's added to stylesheets by WordPress by default.
Add this somewhere in your themes functions.php file:
add_action( 'wp_enqueue_scripts', 'so_50112358_enqueue_css', 20, 0 );
function so_50112358_enqueue_css() {
// Remove the old stylesheet
wp_dequeue_style( 'fbw' );
wp_deregister_style( 'fbw' );
// The new URL to the stylesheet with HTTPS
$css_link = 'https://...';
// Add it in again
wp_register_style( 'fbw', $css_link, array(), '50112358', 'screen' );
wp_enqueue_style( 'fbw' );
}
More information on wp_register_style can be found in the Developer docs. Handy if you want to customise things. Oh and so can wp_deregister_style.
I'm just getting started on Wordpress and although I was making decent progress tweaking my html5blank theme. Everyone kept telling me I should be using a child theme instead - so I decided to do so!
I still want to keep my css/font/js/img folders as close as I can to the structure in original HTML templates. Before using a child theme, I used to load in my /css/main.css file in .header.php like this:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/main.css">
Now I understand I should load it in the html5blank-child folder in .functions.php like this:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/main.css' );
}
?>
This seemed to work but obviously the styles from html5blank/style.css are inherited. I’m guessing it’s not a good idea to remove the file? What would be the best way to handle this?
One other issue with this is I can access the admin via the /wp-admin URL but if I go to a post and 'update' it it goes to a blank post.php page
Any ideas? Thanks in advance!
Instead of using
get_template_directory_uri()
use
get_stylesheet_directory_uri()
and you will always get files from your child theme, if file is not found in child theme it will fallback to your parent theme.
So I have xampp and currently trying to learn some Wordpress development. I've made a simple bootstrap page into Wordpress, but which ever page I put as my front page does not load any CSS, whilst the other pages work fine.
If I change the front page to a page that previously worked fine, it also loses the CSS.
https://i.gyazo.com/bcb75b7a7fa64cd99cb43bd1c3067324.png
https://i.gyazo.com/7184fec113c09755961088fa69191528.png
What am I doing wrong here? I am running everything locally on 127.0.0.1
Thanks in advance for helping me !
The proper way to add css in your files using WordPress to use the function wp_enqueue_style it will not override the css declaration but enqueue it
In your functions.php
function your_scripts() {
wp_enqueue_style( 'filjoseph-style', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );
and putting this <?php wp_head(); ?>in your header.php before </head> in your head section, wordpress will ensure the style.css loaded properly.