Exchange theme font by locally hosted font

Resolved sellie
(@sellie)

3 years 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;
}
```
- This topic was modified 3 years ago by sellie.

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

Theme Author Anders Norén
(@anlino)

3 years ago

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)

3 years ago

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)

3 years ago
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)

3 years ago

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.