Displaying sample fonts

Custom CSS & Theme Design
1

What I’m trying to do

Display a little sample chunk of a web font in much the same way that the google fonts page does, because I have a whole bunch of web fonts that I want to use, but I forget what they all look like. (and I’d rather not have to manage a large set of local copies)

Things I have tried

I have the inline code:

<html>
   <head>
      <link href="https://fonts.googleapis.com/css2?family=Seymour+One&display=swap" rel="stylesheet">
   </head>

   <body>
      <p style = "font-family: 'Seymour One', 'Comfortaa'; font-style: normal; font-size: 60; margin: 0px">Test</p>
   </body>
</html>

The code should work, but checking the web inspector’s Network tab, it doesn’t even try to load the font :frowning:

I know this is a little bit of a weird request, but am I doomed to making an awful css snippit?

2

It’s not that awful. :wink:

The snippet:

@import url("https://fonts.googleapis.com/css2?family=Seymour+One&display=swap");

In your note:

<p style = "font-family: 'Seymour One'; font-style: normal; font-size: 60; margin: 0px">Test</p>

Screenshot 2024-04-19 103753
Screenshot 2024-04-19 103753797×173 5.22 KB

For importing multiple fonts, it would look something like this:

@import url("https://fonts.googleapis.com/css2?family=Henny+Penny&family=Herr+Von+Muellerhoff&family=Macondo&family=Montez&family=Neucha&family=Parisienne&family=Rock+Salt&family=UnifrakturMaguntia&family=Satisfy&display=swap");

// moved to custom CSS

3

Thank you!

4

Glad it worked out.

Just a heads up, as of Obsidian v1.5.x, Google Fonts ( @import url("https://fonts.googleapis.com... ) are the only external URLs that are allowed. Didn’t want you pulling your hair out trying a different domain.

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.