Changing Font with CSS or Plugins

  • I just have a best practice type of question. I can edit the font used on my webpage by modifying the CSS and using font-family to pick what font I want used. This seems to work with all Google fonts. I also am aware of many plug-ins for doing this. What is the best method, or preferred method? To me, it seems simple enough to just use CSS.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Manually in CSS is fine. BUT make sure you are using a child theme.

    Thread Starter Lery

    (@lery)

    Thanks for the response. I think I might have found one limitation. If I try to use a font, sometimes it is not available. For example, https://fontpair.co/ shows an example of the Dosis font. This does not work when used in CSS as font-family. I’m guessing in those cases, I will have to download the font and point to it in my header.php. Or some alternative.

    As @webdev2087 mentioned, do not edit the theme’s style.css file directly. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost. Instead, either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager. A plugin is definitely easier.

    If you use an external font, then usually what you do is include a link to a stylesheet that tells the browser where to get the font, you don’t have to download the font yourself. For example, if you wanted to use Google’s Yanone Kaffesatz font, then you would include a link to the stylesheet in the head section of your site like this:

    <link href='https://fonts.googleapis.com/css?family=Satisfy|Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>

    If you’ve created a child theme, then you would put the link in a copy of the header.php file in your child theme. If you haven’t created a child theme, you can use a plugin like Header and Footer to add the stylesheet link to the head section of all of your pages.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing Font with CSS or Plugins’ is closed to new replies.