search

Y1chenYao / typora-mint-theme

A fresh theme for typora. Light/Dark mode supported.
https://theme.typora.io/theme/Mint/
72 stars 21 forks source link

Fonts don't work when converting to HTML #10

Open alvii147 opened 2 years ago

alvii147 commented 2 years ago

The fonts don't work when converted to HTML and just defaults to Times New Roman:

image

The solution to this is probably including a CSS @font-face definition in the HTML.

@font-face {
    font-family: 'Lexend';
    src: url('Lexend-Regular.ttf') format('truetype');
}

Note that this means users will have to put Lexend-Regular.ttf in the same directory as the HTML.

Y1chenYao commented 2 years ago

Hi, thank you for pointing that out. I have tried many solutions, including the one posted by Typora. See https://github.com/typora/typora-issues/issues/3123 However, your solution did not work as well. Since it is a static website for personal use, I suggest you install the 'Lexend' font on your PC. See https://fonts.google.com/specimen/Lexend#standard-styles

alvii147 commented 2 years ago

Ahh I see, I was hoping to use this theme to host static web pages, so installing the fonts locally won't help. Adding a @font-face definition did help though. It's a nice enough theme for me to be okay with the inconvenience of manually adding the theme. Anywho thanks for looking into it!

alvii147 commented 2 years ago

Actually, have you tried putting this on top of mint.css?

@include-when-export url('https://fonts.googleapis.com/css?family=Lexend');

Update: I added this to mint.css and it worked:

image

Y1chenYao commented 2 years ago

Yes, I have tried it, but when I look into the HTML file I didn't find the font properly added. I manually add the @font-face to HTML embedded CSS and it worked for me. By the way, are you using Mac or Windows? I tested it on Windows, and maybe that is why it didn't work for me.

alvii147 commented 2 years ago

So it looks like it actually doesn't add a @font-face property, but rather adds a link to the font:

<link href='https://fonts.googleapis.com/css?family=Lexend' rel='stylesheet' type='text/css' />

If you visit this link: https://fonts.googleapis.com/css?family=Lexend

You should see that this returns @font-face declarations. You can customize these @font-face declarations (to a certain extent) by customizing the URL. See this: https://developers.google.com/fonts/docs/getting_started

By the way, are you using Mac or Windows?

I'm using Windows 10, Typora version 1.04