Exchange theme font by locally hosted font

  • Resolved sellie

    (@sellie)


    3 years, 11 months ago

    Hi Anders,

    I really love your Hitchcock theme.

    Is it possible to exchange the font of the page header by a locally hosted font?

    I added the following

    • font files to directory /wp-content/themes/hitchcock/fonts/
    • style.css 
      @font-face {
    font-family: 'amsterdam_three';
    src: url(/fonts/amsterdam_three.woff2) format('woff2'),
         url(/fonts/amsterdam_three.woff) format('woff'),
         url(/fonts/amsterdam_three.ttf) format('truetype'),
         url(/fonts/amsterdam_three.otf) format ('opentype');
}
    • Additional CSS 
      .post-title {
	font-family: 'amsterdam_three', 'Montserrat', sans-serif;
}

      • Unfortunately it’s not working. Could you please explain why I failed?

      Thank you so much!

      Best regards,
      Petra

    • This topic was modified 3 years, 11 months ago by sellie.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @sellie,

    Glad you like it! It is, but I would recommend that you add your changes to Customizer → Additional CSS or a child theme. Any changes you make in the /hitchock/ theme folder will be overwritten the next time the theme is updated.

    Also, keep in mind that if you want to remove the connection to Google Fonts entirely, you have to create a child theme, since you’ll need to modify the enqueues added by Hitchcock.

    Can you post a link to the site? It would help with troubleshooting.

    — Anders

    Thread Starter sellie

    (@sellie)

    Hi Anders,

    Thanks for your quick reply.

    I will be definetely using a child theme as soon as it works. There’s no need to remove the Google Fonts as I only want to change the page title.

    Even if I add everything to the Additional CSS it won’t work. It only worked when I installed the font on my local PC ??

    Here’s the link: https://www.simplysaskia.de/

    Petra

    Theme Author Anders Norén

    (@anlino)

    Hi @sellie,

    No worries. I wasn’t able to pinpoint exactly where the code you have went wrong, but my guess is that it was a character encoding issue. Try copying the code below and paste it to the Additional CSS field, while removing the @font-face and .post-title styles you have there currently, and the typeface should appear correctly.

    @font-face {
	font-family: "Amsterdam Three";
	src: url("https://www.simplysaskia.de/wp-content/themes/hitchcock/fonts/amsterdam_three.woff2") format("woff2"),
        url("https://www.simplysaskia.de/wp-content/themes/hitchcock/fonts/amsterdam_three.woff") format("woff"),
        url("https://www.simplysaskia.de/wp-content/themes/hitchcock/fonts/amsterdam_three.ttf") format("truetype"),
        url("https://www.simplysaskia.de/wp-content/themes/hitchcock/fonts/amsterdam_three.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

.post-title {
	font-family: 'Amsterdam Three', sans-serif !important;
	text-transform: none;
}

    — Anders

    Thread Starter sellie

    (@sellie)

    Hi Anders,

    Thank you so much!!! You are a genius!!!

    You can’t imagine how many different combinations I tried to get it work as I already suspected a wrong syntax or character encoding issue.

    You really made my day.

    Petra

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Exchange theme font by locally hosted font’ is closed to new replies.