fonts

How to host Google fonts in WordPress theme locally?

Download CSS with info about embedded fonts from Googleapis.com. Example link: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap Save the file right into your child theme directory so it’s now: https://www.example.com/wp-content/themes/theme-child/fonts.css When you open this fonts.css file, there is content which looks like this: /* latin-ext */ @font-face { font-family: ‘Montserrat’; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format(‘woff2’); unicode-range: … Read more

Font .woff files loaded don’t correspond to the displayed styles [closed]

Don’t know why but this solved the problem @font-face { font-family: “Computer Modern”; src: url(‘http://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff’); } @font-face { font-family: “Computer Modern”; src: url(‘http://localhost/sitename/wp-includes/fonts/latex/cmunti.woff’); font-style: italic; } @font-face { font-family: “Computer Modern”; src: url(‘http://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff’); font-weight: bold; } @font-face { font-family: “Computer Modern”; src: url(‘http://localhost/sitename/wp-includes/fonts/latex/cmunbi.woff’); font-weight: bold; font-style: italic; }

Fonts not loading in Desktop version of Safari/Firefox

It’s because you’re only specifying font-family: Marcellus; inside a @media (max-width: 600px) {}, and your desktop browsers are wider than that. Everything else is using the default stack of “Helvetica Neue, Helvetica, Arial”.

Prevent versioning for .woff (font) files

If you load your fonts using standard stylesheet enqueueing then you can add this to your functions.php file: function remove_querystrings( $src ) { $parts = explode( ‘.woff?ver’, $src ); return $parts[0]; } add_filter( ‘style_loader_src’, ‘remove_querystrings’, 15, 1 ); I haven’t tested this but I’m fairly certain it will only work if you’re adding the fonts … Read more

Including Font Awesome in a Custom Theme

You can go about this in a number of ways. 1) Copy and paste the script tag containing your font-awesome kit in your footer.php before the closing body tag. 2) Using wp_enqueue_style. Below is a working example of a custom WordPress theme with FA enqueued: `function theme_enqueue_scripts() { wp_enqueue_style( ‘Font_Awesome’, ‘https://use.fontawesome.com/releases/v5.6.1/css/all.css‘ ); wp_enqueue_style( ‘Bootstrap_css’, get_template_directory_uri() … Read more

+ More