I'm working with in WordPress and Google Fonts isn't rendering aside from on my Macbook (Chrome and Firefox).
I'm using the #import method for Archivo Narrow. Sample code is below:
#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700');
h1 {font-family: 'Archivo Narrow', sans-serif; font-size:48px; color:#012233; font-weight:bold;}
Website in question is the following: eptestdev.us/northpage
Adding the font via your theme’s functions.php
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
wpbeginner.com how-add-google-web-fonts-wordpress-themes
Related
I spent a couple of hours and could not find any solution for this. I am trying to preload Elegant Icons font with .woff extension and I think i am doing everything correctly, however, Google Page Speed Insights still finding issues:
"We recommend that you use <link rel = preload> to specify earlier
retrieval of resources".
I can see that the icons from the font get loaded on the frontend, however, according to Google Page Speed Insights, the font is still not preloaded. Any help will be much appreaciated. Here is my code in functions.php:
function my_fonts() {
//Add Elegant Icons font
wp_enqueue_style( 'elegant-icons-font', get_template_directory_uri() . '/assets/font/ElegantIcons.woff' );
//Add Elegant Icons css
wp_enqueue_style( 'elegant-icons', get_template_directory_uri() . '/assets/css/elegantIcons.css' );
}
add_action( 'wp_head', 'my_fonts' );
/* Preload Icons font */
function my_font_loader_tag_filter($html, $handle) {
if($handle === 'elegant-icons-font' ) {
return str_replace("rel='stylesheet'", "rel='preload' as='font' type='font/woff2' crossorigin='anonymous'", $html);
}
return $html;
}
add_filter('style_loader_tag', 'my_font_loader_tag_filter',10, 2);
In Elegant Icons css i have
#font-face {
font-family: 'ElegantIcons';
src: url('../fonts/ElegantIcons.woff') format('woff'),
url('../fonts/ElegantIcons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
If i remove the src property from the css file, the icons do not display on the frontend anymore. I even tried hardcoding the link with preload attribute in the site header but Google Page Speed insights is still not happy. I really ran out of any ideas.
Basically, I have imported various custom font templates into my public/fonts folder. Examples are Muli, Muli-Bold, Muli-ExtraBold. My question now is, how do I call and use these fonts in my blade files?
You can add custom fonts in laravel as like you add in an HTML template. You can add it in blade like
<style type="text/css">
#font-face {
font-family: Muli-Bold;
src: url('{{ public_path('fonts/Muli-Bold.tff') }}');
}
</style>
And you can add it in any css file as :
#font-face {
font-family: Muli-Bold;
src: url('/fonts/Muli-Bold.tff');
}
If you want to add custom font in lavarel you can add it just like you do in HTML file . You can add in css as:
#font-face {
font-family: Muli-Bold; src: url('/fonts/Muli-Bold.tff');
}
Or you can include the above code in blade using the style tag.
The Gutenberg editor comes with an embedded stylesheet. Here's a snippet from that stylesheet:
...
.editor-styles-wrapper {
font-family: "Noto Serif", serif;
font-size: 16px;
line-height: 1.8;
color: #191e23;
}
.editor-styles-wrapper p {
font-size: 16px;
line-height: 1.8;
}
...
I've enqueued my own editor stylesheet using the following:
add_action("enqueue_block_editor_assets", "enqueue_custom_block_editor_assets");
function enqueue_custom_block_editor_assets() {
wp_enqueue_style("editor-style", get_stylesheet_directory_uri()."/editor-style.css", null, null);
}
Since I have my own editor stylehseet, I'd like to get rid of the default one. A search on this topic yields lots of results for removing default block styling on the front end, but I'm referring to the editor styling on the back end. Thanks for your help!
I drilled down into how it was being injected and found a way to nuke it out via the block_editor_settings filter. There is a styles key with an array that contains the css. The only iffy thing about this for me is that I'm assuming the shape of the array will always be the same, I should be doing some type of check here.
add_filter( 'block_editor_settings' , 'remove_guten_wrapper_styles' );
public function remove_guten_wrapper_styles( $settings ) {
unset($settings['styles'][0]);
return $settings;
}
My solution was a workaround to automatically override any styles within the .editor-styles-wrapper. Using LESS:
editor-style.css
.editor-styles-wrapper {
#import "style.less";
}
I would still love to disable that embedded stylesheet though, if anyone knows how to do that.
I want to add fonts to my theme. So i have used the bellow code for this.
function load_fonts() {
wp_register_style('et-googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300');
wp_register_style('et-googleFonts', 'http://fonts.googleapis.com/css?family=Helvetica:300italic,400italic,700italic,400,700,300');
wp_enqueue_style( 'et-googleFonts');
}
add_action('wp_print_styles', 'load_fonts');
So i have to use many fonts like Helvetica, Palatino and Trebuchet in the function. But i dont know how to add those fonts.
Try this
function theme_assets() {
wp_enqueue_style( 'et-googleFonts', "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300" );
wp_enqueue_style( 'et-googleFonts1', "http://fonts.googleapis.com/css?family=Helvetica:300italic,400italic,700italic,400,700,300" );
}
add_action( 'wp_enqueue_scripts', 'theme_assets' );
Also there must be wp_head() in your header file to make this work.!
I'm having a problem with font face.
I added code to make the font work in my page, but when I type any keywords the font does not work and shows string keywords.
This is the css code:
/* #font-face kit by Fonts2u (http://www.fonts2u.com) */ #font-face {font-family:"GE Dinar One Medium";src:url("GE_Dinar_One_Medium.eot?") format("eot"),url("GE_Dinar_One_Medium.woff") format("woff"),url("GE_Dinar_One_Medium.ttf") format("truetype"),url("GE_Dinar_One_Medium.svg#GEDinarOne-Medium") format("svg");font-weight:normal;font-style:normal;}
p{font-family:"GE Dinar One Medium";}
and this is the html:
<p>ahmed mohamed احمد محمد
<br />
انا من مدينة المنصورة مصر
</p>
It's just a test, but the font does not work and I'm sure its font url is right. All fonts type are in the same folder
What is the problem?
You may need to add the source of the font family.
See this post
How to add some non-standard font to a website?
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>