Font Face

[DanielDu87]

How to change to a font face I like ?

[noatpad]

Ah, you can clone this repo, & make the changes in the .scss files. You'd want to change specifically the font variables at the top of the file called $paragraph-font, $header-font, & $monospace-font, as well as the @font-face rules below that. You then want to follow the Build instructions to build the CSS files and move the .css files and the ursine folder into your theme folders.

You can also just edit the CSS files you have now, though it can be a bit more tedious to find all the places to make the changes (font-faces, font-family properties, etc.)

[DanielDu87]

I can see 4 scss files after I cloned，which one is that?And is there any type distriction about the font, ttf is available?Is that ursine-umbra.scss?I only find font-face in it....

------------------ 原始邮件 ------------------ 发件人: "Daniel Hernandez"notifications@github.com; 发送时间: 2019年8月31日(星期六) 凌晨0:45 收件人: "aCluelessDanny/typora-theme-ursine"typora-theme-ursine@noreply.github.com; 抄送: "QQ"651608356@qq.com;"Author"author@noreply.github.com; 主题: Re: [aCluelessDanny/typora-theme-ursine] Font Face (#35)

Ah, you can clone this repo, & make the changes in the .scss files. You'd want to change specifically the font variables at the top of the file called $paragraph-font, $header-font, & $monospace-font, as well as the @font-face rules below that. You then want to follow the Build instructions to build the CSS files and move the .css files and the ursine folder into your theme folders.

You can also just edit the CSS files you have now, though it can be a bit more tedious to find all the places to make the changes (font-faces, font-family properties, etc.)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[DanielDu87]

I only find the font-face in ursine-umbra.scss,but no in ursine-polar.scss,I don't know whether it will in the polar theme

------------------ 原始邮件 ------------------ 发件人: "Daniel Hernandez"notifications@github.com; 发送时间: 2019年8月31日(星期六) 凌晨0:45 收件人: "aCluelessDanny/typora-theme-ursine"typora-theme-ursine@noreply.github.com; 抄送: "QQ"651608356@qq.com;"Author"author@noreply.github.com; 主题: Re: [aCluelessDanny/typora-theme-ursine] Font Face (#35)

Ah, you can clone this repo, & make the changes in the .scss files. You'd want to change specifically the font variables at the top of the file called $paragraph-font, $header-font, & $monospace-font, as well as the @font-face rules below that. You then want to follow the Build instructions to build the CSS files and move the .css files and the ursine folder into your theme folders.

You can also just edit the CSS files you have now, though it can be a bit more tedious to find all the places to make the changes (font-faces, font-family properties, etc.)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[DanielDu87]

And also there are 3 items after paragraph-font,header-font,monospace-font,shoud I change them all or what?Sorry about keep asking you questions,cuz I love Bear Note App so much ,I work by it everyday so I love your theme the same.

------------------ 原始邮件 ------------------ 发件人: "Daniel Hernandez"notifications@github.com; 发送时间: 2019年8月31日(星期六) 凌晨0:45 收件人: "aCluelessDanny/typora-theme-ursine"typora-theme-ursine@noreply.github.com; 抄送: "QQ"651608356@qq.com;"Author"author@noreply.github.com; 主题: Re: [aCluelessDanny/typora-theme-ursine] Font Face (#35)

Ah, you can clone this repo, & make the changes in the .scss files. You'd want to change specifically the font variables at the top of the file called $paragraph-font, $header-font, & $monospace-font, as well as the @font-face rules below that. You then want to follow the Build instructions to build the CSS files and move the .css files and the ursine folder into your theme folders.

You can also just edit the CSS files you have now, though it can be a bit more tedious to find all the places to make the changes (font-faces, font-family properties, etc.)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[noatpad]

Ah it's alright really.

So what you wanna do is solely edit the font-faces and certain variables on the top of the file ursine-umbra.scss. Ursine Polar's file, which is ursine-polar.scss, basically inherits all of Ursine Umbra's styling rules, so whatever you edit in Umbra's file will affect both themes. There are different kinds of font types you can use, & they should all work fine without much difference.

Basically, I used 3 different fonts to be used throughout the theme:

• $paragraph-font holds the font for the "regular" text you see throughout the theme, like for paragraphs, tables, etc.
• $header-font is the font for primarily headers, but also for things like blockquotes and the filename title on the sidebar
• And $monospace-font is pretty much used for inline code and code blocks

It's your call to pick which fonts you'd like to change. To change them, simply edit the variable with the font name you want, make sure you have the font-face rules set correctly, & have the font files placed in the right place (the fonts are currently placed within the /ursine folder). The build process will do the rest for ya.

So for example, let's say I wanted to change the font of headers to one I found called Montserrat. After downloading the font (ideally, you'd download 4 variants of that font: one normal, one bold, one italics, & one bold-italic) and placing them in the /ursine folder, I'd change the font-faces to make this font available:

/*
In lines 149-175, where the header font-faces are, I change it from 'Adelle' to 'Montserrat'.
Make sure the "url(...)" part is the correct filepath to your fonts
*/

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat'), url('./ursine/Montserrat.ttf') format('ttf');
  }

  @font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: normal;
    src: local('Montserrat-Italic'), url('./ursine/Montserrat-Italic.ttf') format('ttf');
  }

  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: bold;
    src: local('Montserrat-Bold'), url('./ursine/Montserrat-Bold.ttf') format('ttf');
  }

  @font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: bold;
    src: local('Montserrat-ItalicBold'), url('./ursine/Montserrat-ItalicBold.ttf') format('ttf');
  }

And then simply change $header-font to use the font:

/*
In Line 6, just change 'Adelle' to 'Montserrat'. The other fonts are just fallbacks just in case
*/

$header-font: "'Montserrat', 'Times New Roman', serif";

After you've done all that, follow the Build instructions, & you'll have the built .css files in the /css folder ready to go. Drag and drop those files (not the /css folder) and the /ursine folder into your theme folder, restart Typora, and you should be good to go

[DanielDu87]

I tried but it donesn't work and I don't know. The font I want is called SourceHanSans. https://github.com/adobe-fonts/source-han-sans Can you do it for me please?

------------------ 原始邮件 ------------------ 发件人: "Daniel Hernandez"notifications@github.com; 发送时间: 2019年9月4日(星期三) 凌晨1:56 收件人: "aCluelessDanny/typora-theme-ursine"typora-theme-ursine@noreply.github.com; 抄送: "QQ"651608356@qq.com;"Author"author@noreply.github.com; 主题: Re: [aCluelessDanny/typora-theme-ursine] Font Face (#35)

Ah it's alright really.

So what you wanna do is solely edit the font-faces and certain variables on the top of the file ursine-umbra.scss. Ursine Polar's file, which is ursine-polar.scss, basically inherits all of Ursine Umbra's styling rules, so whatever you edit in Umbra's file will affect both themes. There are different kind of font types you can use, & they should all work fine without much difference.

Basically, I used 3 different fonts to be used throughout the theme:

$paragraph-font holds the font for the "regular" text you see throughout the theme, like for paragraphs, tables, etc.

$header-font is the font for primarily headers, but also for things like blockquotes and the filename title on the sidebar

And $monospace-font is pretty much used for inline code and code blocks

It's your call to pick which fonts you'd like to change. To change them, simply edit the variable with the font name you want, make sure you have the font-face rules set correctly, & have the font files placed in the right place (the fonts are currently placed within the /ursine folder. The build process will do the rest for ya.

So for example, let's say I wanted to change the font of headers to one I found called [Montserrat](https://fonts.google.com/specimen/Montserrat. After downloading the font (ideally, you'd download 4 variants of that font: one normal, one bold, one italics, & one bold-italic) and placing them in the /ursine folder, I'd change the font-faces to make this font available: / In lines 149-175, where the header font-faces are, I change it from 'Adelle' to 'Montserrat'. Make sure the "url(...)" part is the correct filepath to your fonts / @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: normal; src: local('Montserrat'), url('./ursine/Montserrat.ttf') format('ttf'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: normal; src: local('Montserrat-Italic'), url('./ursine/Montserrat-Italic.ttf') format('ttf'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: bold; src: local('Montserrat-Bold'), url('./ursine/Montserrat-Bold.ttf') format('ttf'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: bold; src: local('Montserrat-ItalicBold'), url('./ursine/Montserrat-ItalicBold.ttf') format('ttf'); }

And then simply change $header-font to use the font: / In Line 6, just change 'Adelle' to 'Montserrat'. The other fonts are just fallbacks just in case / $header-font: "'Montserrat', 'Times New Roman', serif";

After you've done all that, follow the Build instructions, & you'll have the built .css files in the /css folder ready to go. Drag and drop those files (not the /css folder) and the /ursine folder into your theme folder, restart Typora, and you should be good to go

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[cemetary]

@danielduyixin Show us your .css file content. Maybe we can help.

[noatpad]

Gonna close this since it's been a while since his last response