Because ofCSS inheritance, this technique is more likely to work if you place your new rules at the bottom of your .css file. In this example I will assign the ‘Quicksand’ font to text in my sidebar: .sidebar { font-family: Quicksand; } I could also be more specific and only targe...
Fore this method, we’ll import the font CSS in our WordPress theme’s main CSS file. Simply edit style.css file in your WordPress theme’s root folder and add the code from the ‘@import’ tab to the top of the CSS file. @import url('https://fonts.googleapis.com/css2?family=Open...
OpenGoogle Fontspage in your browser, and check out the font options available there. When you find the one you want, click on the Add to Collection button against that font style. For this tutorial, I am choosing Dancing Script style with weights 700 and 400. You can choose more than o...
Be sure to change the portion afterurl('to point to your CDN, as well as the folder where you placed your font files. There are two ways you could add the@font-facecode to your site: How to add @font-face code to Additional CSS in the Customizer 1.style.cssfile(recommended) Open ...
This service has more than 800 fonts available in different styles, sizes, and strengths. You can also browse through the font library as you sample different fonts that look amazing. Sounds interesting, right? Keep reading to learn how to add Google Fonts to your WordPress website. Adding ...
In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and the CSS3 @Font-Face method. Note:Loading too many fonts can slow down your website. We recommend choosing two fonts and using them across your website. We’ll also show you how to...
functionmyprefix_enqueue_google_fonts(){wp_enqueue_style('roboto','https://fonts.googleapis.com/css?family=Roboto');}add_action('wp_enqueue_scripts','myprefix_enqueue_google_fonts'); In this particular snippet we used thewp_enqueue_stylefunction to load the “Roboto” Google font on the we...
<link rel='stylesheet'href='http://fonts.googleapis.com/css?family=Adamina'type='text/css'/> In other words, the above will allow us to use the new “Adamina” Google Web font on our WordPress site. But what if I wanted to use more than one Google Font on my site?
We then copied the Google Fonts, Open Sans, to serve from KeyCDN and ran another test on WebPageTest. Load Time: 2.360 s Fully Loaded: 2.452 s As you can see there are only two HTTP requests now because we no longer have to grab the CSS file from fonts.googleapis.com. And both of...
// Add Google Scripts for use with the editor.add_action('admin_init',function(){$font_url='https://fonts.googleapis.com/css?family=Lato:300,400,700';add_editor_style(str_replace(',','%2C',$font_url));}); The code above loads the custom font regardless if the font is actually...