Customize font family of visual mode in Rstudio and in Zotero


Jihong Zhang


February 10, 2024

1 Rstudio Visual Editor Font

Screenshot for customized material theme

Screenshot for customized material theme

Visual model of quarto and rmarkdown is very easy to use. Though users can change font family for Source mode in Rstudio by Options menu, there is no direct way change font family for Visual model. However, by customizing the rstudio theme file—“.rstheme”, users can change font size/family/margin of Visual mode.

First of all, users can install some customized rstudio themes from github. For example, following guidelines here.

Second, on Mac, copy one .rstheme file (~/.config/rstudio/themes) and rename it to your customized file (in my case, jihongMaterials.rstheme).

  rstudio ls   
dictionaries       rstudio-prefs.json themes
  rstudio cd themes 
  themes ls
material-lighter.rstheme   material-palenight.rstheme material.rstheme
  themes cp material.rstheme jihongMaterial.rstheme
  themes code jihongMaterial.rstheme        

Third, open up the .rstheme file and add the following code in the beginning of the file:

/* rs-theme-name: jihongMaterial */
/* rs-theme-is-dark: TRUE */

.pm-proportional-font {
  font-family: "Apple SD Gothic Neo", serif !important;
  font-size: 16pt !important;

.pm-editing-root-node {
    padding-left: calc((100% - 1300px)/2) !important;
    padding-right: calc((100% - 1300px)/2) !important;

Note that .pm-proportional-font controls the font in Visual model. Users can change the font family/size just like CSS file.

Now, restart your Rstudio, select your theme from `Global Options`. You should find the user-specified font family in your Visual Model

Here is the my customized file: jihongMaterial.rstheme


  • Please look over the website for more details.

2 Zotero Editor Font

Screenshot for Zotero windown

Screenshot for Zotero windown
  mkdir /Users/[username]/Library/Application\ Support/Zotero/Profiles/[xxxxxxx].default/Chrome
  cd /Users/[username]/Library/Application\ Support/Zotero/Profiles/[xxxxxxx].default/Chrome 
  touch userChrome.css
  vim userChrome.css 
  open userChrome.css 

To change the font family for Zotero window, create a new folder “Chrome” in above path. Next, create a userChrome.css in that folder. A template for css file is here. Add font-family setting in the first several lines (line3-5).

If you want to use my theme file, you can cope&paste the following file into your userChrome.css file.


/*:::::::::::::::::::::::::::::::::::::::::::::::::::: Zotero :::::::::::::::::::::::::::::::::::::::::::::::::::*/
* {border: 0 !important; 
  font-family: 'Baloo 2', Source Sans Pro, Fira Sans, SF Pro Text, -apple-system, sans-serif ! important;

/*change background color and text color of zotero toolbar and menubar*/
#zotero-tb, #zotero-toolbar, #navigator-toolbox, #tab-bar-container { background: #323234 !important;
color: #FFFFFF !important; }
#zotero-toolbar {border-bottom: 1px solid #1d1d1d !important;}

Back to top


BibTeX citation:
  author = {Zhang, Jihong},
  title = {Customize Font Family of Visual Mode in {Rstudio} and in
  date = {2024-02-10},
  url = {},
  langid = {en}
For attribution, please cite this work as:
Zhang, Jihong. 2024. “Customize Font Family of Visual Mode in Rstudio and in Zotero.” February 10, 2024.