既定の欧文フォントを「Inter」（UIその他）と「Atkinson Hyperlegible Next」（本文）に置き換えるUserCSS
UIフォントの Open Sans を Inter に、ページ本文の欧文フォントを Atkinson Hyperlegible Next に置き換える
Cosenseの app.css では、UI用と本文用の欧文フォントとして Open Sans、または Helvetica 互換のフォントが指定されている
備考：app.cssの該当箇所 (2025-12-26時点)
code:app.css
html {
font-family: sans-serif;
}
UIその他のフォント指定箇所：
code:app.css
body{
font-family: "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif;
}
input,button,select,textarea{
font-family:inherit;
}
ページ本文のフォント指定箇所：
code:app.css
.editor {
font-family: "Roboto", Helvetica, Arial, "Hiragino Sans", sans-serif;
}
UIその他の欧文フォント指定を「Inter」に置き換える
Inter - Google Fonts
幅の狭いフォントで表示されたほうが都合がよいだろう関連ページリストのカードビューのフォントを対象から除外する
#Todo フォントメトリクスの似通ったフォントである「Noto Sans」をカスケードレイヤー付きで指定する
code:style.css
@layer lesser {
body{
font-family: "Noto Sans", Helvetica, Arial, "Hiragino Sans", sans-serif;
}
}
code:style.css
@font-face {
font-family: "Open Sans";
src: local("Inter Variable"),
local("Inter"),
local("Open Sans");
}
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwAT9nA2.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwgT9nA2.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwcT9nA2.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwsT9nA2.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwoT9nA2.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwQT9g.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvvYwYL8g.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvmYwYL8g.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvuYwYL8g.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvhYwYL8g.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvtYwYL8g.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter Variable"),
local("Inter"),
url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwY.woff2) format('woff2'),
local("Open Sans");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#グローバルメニュー
? Inter (Inter Variable) を第一フォントに指定すると、なぜかグローバルメニューのCosenseプロジェクト検索の虫眼鏡アイコンが極小になってしまう
原因を特定できていない
参考：app.css の記述箇所
code:app.css
.global-menu.dropdown-menu>li>a .kamon,
.global-menu.dropdown-menu>li.dropdown-header .kamon {
margin-left: 4px;
width: 18px;
height: 18px;
line-height: 18px;
font-size: 18px;
display: inline-block;
}
widthとheightをそれぞれmin-widthとmin-heightに置き換えると、この問題が発生しなくなる
code:style.css
.global-menu.dropdown-menu>li>a .kamon,
.global-menu.dropdown-menu>li.dropdown-header .kamon {
min-width: 18px;
min-height: 18px;
}
しかし、今度はメニューを開いたときの位置が左にずれてしまう
https://gyazo.com/1faa469bf1449303642f169ff5a4386f
ページ本文の欧文フォントを Atkinson Hyperlegible Next にする
フォント名 Roboto の中身を置き換える
できればfont-family:プロパティを上書きせずに済ませたい
これに際して@font-faceにsize-adjust指定を追加し文字の高さを Roboto とほとんど同じにする（目視による数値調整）
Atkinson Hyperlegible Next - Google Fonts
Google Fonts のAPIにはsize-adjustを指定する引数がないため、UserCSSにweb fontのCSSをベタ貼りするしかない
code:style.css
@font-face {
font-family: "Roboto";
font-style: italic;
font-weight: 200 800;
size-adjust: 107%;
font-display: swap;
src: local("Atkinson Hyperlegible Next"),
local("Roboto Flex"),
local("Roboto");
}
/* latin-ext */
@font-face {
font-family: "Roboto";
font-style: italic;
font-weight: 200 800;
size-adjust: 107%;
font-display: swap;
src: local("Atkinson Hyperlegible Next"),
url(https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v4/NaPPcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiMr3a-oXZ-.woff2) format('woff2'),
local("Roboto Flex"),
local("Roboto");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Roboto";
font-style: italic;
font-weight: 200 800;
size-adjust: 107%;
font-display: swap;
src: local("Atkinson Hyperlegible Next"),
url(https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v4/NaPPcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiMr3i-oQ.woff2) format('woff2'),
local("Roboto Flex"),
local("Roboto");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 200 800;
size-adjust: 107%;
font-display: swap;
src: local("Atkinson Hyperlegible Next"),
url(https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v4/NaPNcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiHn3qmpQ.woff2) format('woff2'),
local("Roboto Flex"),
local("Roboto");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 200 800;
size-adjust: 107%;
font-display: swap;
src: local("Atkinson Hyperlegible Next"),
url(https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v4/NaPNcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiJn3o.woff2) format('woff2'),
local("Roboto Flex"),
local("Roboto");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#Cosense閲覧用のUserCSSの詰め合わせ
#UserCSS