Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font Face #35

Closed
DanielDu87 opened this issue Aug 29, 2019 · 8 comments
Closed

Font Face #35

DanielDu87 opened this issue Aug 29, 2019 · 8 comments

Comments

@DanielDu87
Copy link

How to change to a font face I like ?
@noatpad
Copy link
Owner

noatpad commented Aug 30, 2019

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.)

@noatpad noatpad mentioned this issue Aug 30, 2019
Closed
@DanielDu87
Copy link
Author

DanielDu87 commented Sep 3, 2019 via email

@DanielDu87
Copy link
Author

DanielDu87 commented Sep 3, 2019 via email

@DanielDu87
Copy link
Author

DanielDu87 commented Sep 3, 2019 via email

@noatpad
Copy link
Owner

noatpad commented Sep 3, 2019 •
edited
Loading

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
Copy link
Author

DanielDu87 commented Sep 5, 2019 via email

@cemetary
Copy link

cemetary commented Sep 7, 2019

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

@noatpad
Copy link
Owner

noatpad commented Oct 8, 2019

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

@noatpad noatpad closed this as completed Oct 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cemetary @DanielDu87 @noatpad