Can I use Google Fonts with a custom theme?

Getting started
1

New here… I am using Kiko theme…can I integrate Google Fonts for this theme? If so a step by step would be greatly appreciated.

Thank you,
Randy

2

Yes, you can use Google Fonts by adding a font reference to the CSS. In Micro.blog, click on Design → Edit Custom CSS and paste in the CSS that you get from Google. It will look something like this:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

body {
  font-family: "Roboto";
}

Let us know if you have any questions.

1 Like
3

Awesome, added to my todoist list for the day.

4

I use Optima as a screen font whenever possible, but it is standard only on MacOS. I got the following font stack recommendation from CSS Font Stack

font-family: Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;

SImilarFonts.io recommends Arsenal as a Google font similar to Optima. Based on the embed code provided by Google and this post, my custom CSS now includes:

/* Base */

html, body {
	height: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"');

body {
	font: 17px Optima,Arsenal,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
	color: #666;
	text-rendering: optimizeLegibility;
}

Am I doing this right? It looks fine on my MacBook, but I haven’t yet tested on my work Windows laptop. I’ve got a reasonable idea of what the code is doing except for display=swap" rel="stylesheet".