CSS Change font typemill theme

nikbckm commented 2 years ago

Hi all,

got a probably very simple question: How can I change the font of the typemill theme to a google font?

I guess this should be quite straightforward, bur I am struggeling here.

Would appreciate any help!

Thank you :) Nik

trendschau commented 2 years ago

Hi Nik,

it is described for example here: https://developers.google.com/fonts/docs/getting_started

So in the files layout.twig and layoutCover.twig you can add it like this:

        {% block stylesheets %}
                        <link rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Font+Name">

            <link rel="stylesheet" href="{{ base_url }}/themes/typemill/css/fontello/css/fontello.css" />
            <link rel="stylesheet" href="{{ base_url }}/themes/typemill/css/normalize.css" />
            <link rel="stylesheet" href="{{ base_url }}/themes/typemill/css/style.css?20220108" />

            {{ assets.renderCSS() }}

        {% endblock %}

And then you can use the custom-css field in the theme settings and add something like this:

 body{
  font-family: 'Font Name';
}

Replace Font+Name with the font that you selected.

That's it basically, alghough there are a lot more things to say, for example I do not include external fronts from privacy reasons but instead I download them, put them in a folder of the theme and then include them with @font-face. There are probably also a lot of points that you can say about performance and loading, but I am not an expert in those font-topics...

Hope it helps...

trendschau commented 3 months ago

Will close this because all questions answered I hope :)

typemill / typemill

CSS Change font typemill theme #305