Fonts
Mac OS Default Fonts(Available in ver Montrery)
Please check below link for available fonts in Mac(means no need to have local font file or cdn call in head)
Ref: https://support.apple.com/ja-jp/HT212587
Windows 11 OS Default Fonts
Please check below link for available fonts in Windows(means no need to have local font file or cdn call in head)
Ref: https://learn.microsoft.com/ja-jp/typography/fonts/windows_11_font_list
Fonts Available both in Mac and Windows
comming soon
Noto Sans Japanese - フォントの見え方はこうなります。
Noto Sans ExtraLight 200 - フォントの見え方はこうなります。
Noto Sans Light 300 - フォントの見え方はこうなります。
Noto Sans Regular 400 - フォントの見え方はこうなります。
Noto Sans Medium 500 - フォントの見え方はこうなります。
Noto Sans SemiBold 600 - フォントの見え方はこうなります。
Noto Sans Bold 700 - フォントの見え方はこうなります。
Noto Sans ExtraBold 800 - フォントの見え方はこうなります。
Noto Sans Black 900 - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.font-notosansjp{
font-family: "NotoSansJP", sans-serif;
}
@font-face {
font-family: "NotoSansJP";
font-weight: 200;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-Light.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-Light.woff") format("woff");
}
@font-face {
font-family: "NotoSansJP";
font-weight: 300;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-Light.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-Light.woff") format("woff");
}
@font-face {
font-family: "NotoSansJP";
font-weight: 400;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-Regular.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
font-family: "NotoSansJP";
font-weight: 500;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-Medium.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-Medium.woff") format("woff");
}
@font-face {
font-family: "NotoSansJP";
font-weight: 600;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-SemiBold.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-SemiBold.woff") format("woff");
}
@font-face {
font-family: "NotoSansJP";
font-weight: 700;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-Bold.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-Bold.woff") format("woff");
}
@font-face {
font-family: "NotoSansJP";
font-weight: 800;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-ExtraBold.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-ExtraBold.woff") format("woff");
}
@font-face {
font-family: "NotoSansJP";
font-weight: 900;
font-style: normal;
font-display: swap;
font-optical-sizing: auto;
src: url("../fonts/notosansjp/NotoSansJP-Black.woff2") format("woff2"),
url("../fonts/notosansjp/NotoSansJP-Black.woff") format("woff");
}
Noto Serif Japanese - フォントの見え方はこうなります。
Noto Serif ExtraLight 200 - フォントの見え方はこうなります。
Noto Serif Light 300 - フォントの見え方はこうなります。
Noto Serif Regular 400 - フォントの見え方はこうなります。
Noto Serif Medium 500 - フォントの見え方はこうなります。
Noto Serif SemiBold 600 - フォントの見え方はこうなります。
Noto Serif Bold 700 - フォントの見え方はこうなります。
Noto Serif ExtraBold 800 - フォントの見え方はこうなります。
Noto Serif Black 900 - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.font-notoserifjp {
font-family: "NotoSerifJP", serif;
}
@font-face {
font-family: "NotoSerifJP";
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("../fonts/notoserif_jp/NotoSerifJP-Light.woff2") format("woff2"),
url("../fonts/notoserif_jp/NotoSerifJP-Light.woff") format("woff");
}
@font-face {
font-family: "NotoSerifJP";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/notoserif_jp/NotoSerifJP-Regular.woff2") format("woff2"),
url("../fonts/notoserif_jp/NotoSerifJP-Regular.woff") format("woff");
}
@font-face {
font-family: "NotoSerifJP";
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/notoserif_jp/NotoSerifJP-Medium.woff2") format("woff2"),
url("../fonts/notoserif_jp/NotoSerifJP-Medium.woff") format("woff");
}
@font-face {
font-family: "NotoSerifJP";
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/notoserif_jp/NotoSerifJP-SemiBold.woff2") format("woff2"),
url("../fonts/notoserif_jp/NotoSerifJP-SemiBold.woff") format("woff");
}
@font-face {
font-family: "NotoSerifJP";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/notoserif_jp/NotoSerifJP-Bold.woff2") format("woff2"),
url("../fonts/notoserif_jp/NotoSerifJP-Bold.woff") format("woff");
}
@font-face {
font-family: "NotoSerifJP";
font-weight: 800;
font-style: normal;
font-display: swap;
src: url("../fonts/notoserif_jp/NotoSerifJP-ExtraBold.woff2") format("woff2"),
url("../fonts/notoserif_jp/NotoSerifJP-ExtraBold.woff") format("woff");
}
Hiragino Mincho Pro - ヒラギノ明朝 ProN
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
Hiragino Mincho Pro 500 - ヒラギノ明朝 ProN (font weight 500)
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
HiraMinProN-W3 - ヒラギノ明朝 ProN W3
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
HiraMinProN-W6 - ヒラギノ明朝 ProN W6
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
.font-hiraginoMincho {
font-family: "ヒラギノ明朝 ProN", "HiraMinProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.font-hiraginoMinchoW3 {
font-weight: 300;
font-family: “ヒラギノ明朝 ProN W3”, “Hiragino Mincho Pro”, “HiraMinProN-W3”, “HG明朝E”, “ＭＳ Ｐ明朝“, “MS PMincho”, “MS 明朝“, serif;
}
.font-hiraginoMinchoW6 {
font-weight: 600;
font-family: “ヒラギノ明朝 ProN W6”, “Hiragino Mincho Pro”, “HiraMinProN-W6”, “HG明朝E”, “ＭＳ Ｐ明朝“, “MS PMincho”, “MS 明朝“, serif;
}
Hiragino Kaku Gothic - フォントの見え方はこうなります。
Hiragino Kaku Gothic - フォントの見え方はこうなります。
Hiragino Kaku Gothic - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
Kosugi Maru - フォントの見え方はこうなります。
Kosugi Maru - フォントの見え方はこうなります。
Kosugi Maru - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
.font-kosugimaru {
font-family: 'KosugiMaru', sans-serif;
}
@font-face {
font-family: 'KosugiMaru';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/Kosugi_Maru/KosugiMaru-Regular.woff2") format("woff2"),
url("../fonts/Kosugi_Maru/KosugiMaru-Regular.woff") format("woff");
}
Shippori Mincho - フォントの見え方はこうなります。
Shippori Mincho FW400 - フォントの見え方はこうなります。
Shippori Mincho FW600 - フォントの見え方はこうなります。
Shippori Mincho FW500 - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
.font-shipporimincho {
font-family: 'ShipporiMincho', serif;
}
@font-face {
font-family: ShipporiMincho;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/shippori_mincho/ShipporiMincho-Regular.woff2") format("woff2"),
url("../fonts/shippori_mincho/ShipporiMincho-Regular.woff") format("woff");
}
@font-face {
font-family: ShipporiMincho;
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/shippori_mincho/ShipporiMincho-Medium.woff2") format("woff2"),
url("../fonts/shippori_mincho/ShipporiMincho-Medium.woff") format("woff");
}
@font-face {
font-family: ShipporiMincho;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/shippori_mincho/ShipporiMincho-SemiBold.woff2") format("woff2");
src: url("../fonts/shippori_mincho/ShipporiMincho-SemiBold.woff") format("woff"),
}
Zen Kaku Gothic New - フォントの見え方はこうなります。
Zen Kaku Gothic New FW300 - フォントの見え方はこうなります。
Zen Kaku Gothic New FW400 - フォントの見え方はこうなります。
Zen Kaku Gothic New FW500 - フォントの見え方はこうなります。
Zen Kaku Gothic New FW700 - フォントの見え方はこうなります。
Zen Kaku Gothic New FW900 - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
.font-zenkakugothicnew {
font-family: 'Zen_Kaku_Gothic_New', sans-serif;
}
@font-face {
font-family: 'Zen_Kaku_Gothic_New';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Light.woff2") format("woff2"),
url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Light.woff") format("woff");
}
@font-face {
font-family: 'Zen_Kaku_Gothic_New';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.woff2") format("woff2"),
url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.woff") format("woff");
}
@font-face {
font-family: 'Zen_Kaku_Gothic_New';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Medium.woff2") format("woff2"),
url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Medium.woff") format("woff");
}
@font-face {
font-family: 'Zen_Kaku_Gothic_New';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.woff2") format("woff2"),
url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.woff") format("woff");
}
@font-face {
font-family: 'Zen_Kaku_Gothic_New';
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Black.woff2") format("woff2"),
url("../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Black.woff") format("woff");
}
Zen Old Mincho - フォントの見え方はこうなります。
Zen Old Mincho FW300 - フォントの見え方はこうなります。
Zen Old Mincho FW400 - フォントの見え方はこうなります。
Zen Old Mincho FW500 - フォントの見え方はこうなります。
Zen Old Mincho FW700 - フォントの見え方はこうなります。
Zen Old Mincho FW900 - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
.font-zenoldmincho {
font-family: 'Zen_Old_Mincho', serif;
}
@font-face {
font-family: 'Zen_Old_Mincho';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Old_Mincho/ZenOldMincho-Regular.woff2") format("woff2"),
url("../fonts/Zen_Old_Mincho/ZenOldMincho-Regular.woff") format("woff");
}
@font-face {
font-family: 'Zen_Old_Mincho';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Old_Mincho/ZenOldMincho-Medium.woff2") format("woff2"),
url("../fonts/Zen_Old_Mincho/ZenOldMincho-Medium.woff") format("woff");
}
@font-face {
font-family: 'Zen_Old_Mincho';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Old_Mincho/ZenOldMincho-SemiBold.woff2") format("woff2"),
url("../fonts/Zen_Old_Mincho/ZenOldMincho-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Zen_Old_Mincho';
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Old_Mincho/ZenOldMincho-Bold.woff2") format("woff2"),
url("../fonts/Zen_Old_Mincho/ZenOldMincho-Bold.woff") format("woff");
}
@font-face {
font-family: 'Zen_Old_Mincho';
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("../fonts/Zen_Old_Mincho/ZenOldMincho-Black.woff2") format("woff2"),
url("../fonts/Zen_Old_Mincho/ZenOldMincho-Black.woff") format("woff");
}
Lato - フォントの見え方はこうなります。
Lato FW400 - フォントの見え方はこうなります。
Lato FW700 - フォントの見え方はこうなります。
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
いつはほかできるだけその教育打というはずの時が聴かたない。とうとう十一月に仕事違いは余計その相当ななじゃがあっからいでをも関係するべきでが、またには知れなたたる。辞令をあっつ事はいかにほかがいよいようだまし。ともかく岩崎さんに発会教場再び尊敬に云っある高圧ある錐何か実在がとかいうお話んましですありので、そんなたくさんはそちらかわがまま男が考えて、嘉納君ののが他の私を毫もお評として私自己をお落第のよっように恐らくご出立がいうでたて、余計何とも誘惑が当てるありからなりありつもりでかかわらですない。
.font-Lato {
font-family: 'Lato', sans-serif;
}
@font-face {
font-family: 'Lato';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/Lato/Lato-Bold.woff2") format("woff2"),
url("../fonts/Lato/Lato-Bold.woff2") format("woff");
}
@font-face {
font-family: 'Lato';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/Lato/Lato-Regular.woff2") format("woff2"),
url("../fonts/Lato/Lato-Regular.woff") format("woff");
}
Alata - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-alata {
font-family: 'Alata', sans-serif;
}
@font-face {
font-family: Alata;
font-weight: 400;
font-style: normal;
src: url("../fonts/alata/Alata-Regular.woff2") format("woff2"), url("../fonts/alata/Alata-Regular.woff") format("woff");
}
Cochin - This is font for English
Cochin - This is font for English .fs-italic
Cochin FW400 - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-cochin {
font-family: 'Cochin', serif;
}
@font-face {
font-family: Cochin;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/cochin/Cochin.woff2") format("woff2"),
url("../fonts/cochin/Cochin.woff") format("woff");
}
@font-face {
font-family: Cochin;
font-weight: 400;
font-style: oblique;
font-display: swap;
src: url("../fonts/cochin/Cochin-Italic.woff2") format("woff2"),
url("../fonts/cochin/Cochin-Italic.woff") format("woff");
}
@font-face {
font-family: Cochin;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/cochin/Cochin-Bold.woff") format("woff");
}
@font-face {
font-family: Cochin;
font-weight: 600;
font-style: oblique;
font-display: swap;
src: url("../fonts/cochin/Cochin-BoldItalic.woff2") format("woff2"),
url("../fonts/cochin/Cochin-BoldItalic.woff") format("woff");
}
CormorantGaramond - This is font for English
CormorantGaramond FW400 - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-cormorant_garamond {
font-family: "CormorantGaramond", serif;
}
@font-face {
font-family: CormorantGaramond;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/cormorant_garamond/CormorantGaramond-Regular.woff2") format("woff2"),
url("../fonts/cormorant_garamond/CormorantGaramond-Regular.woff") format("woff");
}
@font-face {
font-family: CormorantGaramond;
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/cormorant_garamond/CormorantGaramond-Medium.woff2") format("woff2"),
url("../fonts/cormorant_garamond/CormorantGaramond-Medium.woff") format("woff");
}
@font-face {
font-family: CormorantGaramond;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/cormorant_garamond/CormorantGaramond-SemiBold.woff2") format("woff2"),
url("../fonts/cormorant_garamond/CormorantGaramond-SemiBold.woff") format("woff");
}
@font-face {
font-family: CormorantGaramond;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/cormorant_garamond/CormorantGaramond-Bold.woff2") format("woff2"),
url("../fonts/cormorant_garamond/CormorantGaramond-Bold.woff") format("woff");
}
CrimsonPro - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-crimsonpro {
font-family: 'CrimsonPro', serif;
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 200;
font-style: normal;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-ExtraLight.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-ExtraLight.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 200;
font-style: italic;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-ExtraLightItalic.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-ExtraLightItalic.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-Light.woff2") format("woff2"),
url("../fonts/fonts/crimson_pro/CrimsonPro-Light.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 300;
font-style: italic;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-LightItalic.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-LightItalic.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-Regular.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-Regular.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-Italic.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-Italic.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-Medium.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-Medium.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 500;
font-style: italic;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-MediumItalic.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'CrimsonPro';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/crimson_pro/CrimsonPro-Bold.woff2") format("woff2"),
url("../fonts/crimson_pro/CrimsonPro-Bold.woff") format("woff");
}
Futura - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-futura {
font-family: 'Futura', sans-serif;
}
@font-face {
font-family: 'Futura';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("../fonts/futura/futura light bt.woff2") format("woff2"),
url("../fonts/futura/futura light bt.woff") format("woff");
}
@font-face {
font-family: 'Futura';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/futura/Futura Bold font.woff2") format("woff2"),
url("../fonts/futura/Futura Bold font.woff") format("woff");
}
@font-face {
font-family: 'Futura';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/futura/futura medium bt.woff2") format("woff2"),
url("../fonts/futura/futura medium bt.woff") format("woff");
}
@font-face {
font-family: 'Futura';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/futura/Futura Bold font.woff2") format("woff2"),
url("../fonts/futura/Futura Bold font.woff") format("woff");
}
Isidora Sans - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-isidoraSans {
font-family: 'IsidoraSans', sans-serif;
}
@font-face {
font-family: 'IsidoraSans';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/isidorasans/Isidora-regular.woff2") format("woff2"),
url("../fonts/isidorasans/Isidora-regular.woff") format("woff");
}
@font-face {
font-family: 'IsidoraSans';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/isidorasans/Isidora-medium.woff2") format("woff2"),
url("../fonts/isidorasans/Isidora-medium.woff") format("woff");
}
M PLUS 1 - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-mplus1 {
font-family: 'M PLUS 1', sans-serif;
}
@font-face {
font-family: 'M PLUS 1';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/mplus1/mplus1-medium.woff2") format("woff2"),
url("../fonts/mplus1/mplus1-medium.woff") format("woff");
}
Myanmar MN - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-MyanmarMN {
font-family: 'Myanmar MN', sans-serif;
}
@font-face {
font-family: 'Myanmar MN';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/myanmar_mn/MyanmarMN.woff2") format("woff2"),
url("../fonts/myanmar_mn/MyanmarMN.woff") format("woff");
}
@font-face {
font-family: 'Myanmar MN';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/myanmar_mn/myanmarMN-bold.woff2") format("woff2"),
url("../fonts/myanmar_mn/myanmarMN-bold.woff") format("woff");
}
Optima - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-optima {
font-family: 'Optima', sans-serif;
}
@font-face {
font-family: 'Optima';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/optima/Optima-Regular.woff2") format("woff2"),
url("../fonts/optima/Optima-Regular.woff") format("woff");
}
@font-face {
font-family: 'Optima';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/optima/Optima-bold.woff2") format("woff2"),
url("../fonts/optima/Optima-bold.woff") format("woff");
}
@font-face {
font-family: 'Optima';
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("../fonts/optima/Optima-ExtraBlack.woff2") format("woff2"),
url("../fonts/optima/Optima-ExtraBlack.woff") format("woff");
}
Outfit - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-outfit {
font-family: 'Outfit', sans-serif;
}
@font-face {
font-family: 'Outfit';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/outfit/Outfit-Regular.woff2") format("woff2"),
url("../fonts/myanmar_mn/Outfit-Regular.woff") format("woff");
}
@font-face {
font-family: 'Outfit';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/outfit/Outfit-Medium.woff2") format("woff2"),
url("../fonts/outfit/Outfit-Medium.woff") format("woff");
}
@font-face {
font-family: 'Outfit';
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/outfit/Outfit-SemiBold.woff2") format("woff2"),
url("../fonts/outfit/Outfit-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Outfit';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/outfit/Outfit-Bold.woff2") format("woff2"),
url("../fonts/outfit/Outfit-Bold.woff") format("woff");
}
Roboto - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-Roboto {
font-family: 'Roboto', sans-serif;
}
@font-face {
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Regular.woff") format("woff");
}
@font-face {
font-family: 'Roboto';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Medium.woff") format("woff");
}
@font-face {
font-family: 'Roboto';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Bold.woff") format("woff");
}
@font-face {
font-family: 'Roboto';
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("../fonts/roboto/Roboto-Black.woff2") format("woff2"),
url("../fonts/roboto/Roboto-Black.woff") format("woff");
}
Inter - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-Inter{
font-family: 'Inter', serif;
}
@font-face {
font-family: 'Inter';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("../fonts/Inter/Inter-Light.woff2") format("woff2"),
url("../fonts/Inter/Inter-Light.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/Inter/Inter-Regular.woff2") format("woff2"),
url("../fonts/Inter/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/Inter/Inter-Medium.woff") format("woff2"),
url("../fonts/Inter/Inter-Medium.woff2") format("woff");
}
@font-face {
font-family: 'Inter';
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
url("../fonts/Inter/Inter-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/Inter/Inter-Bold.woff2") format("woff2"),
url("../fonts/Inter/Inter-Bold.woff") format("woff");
}
Marcellus - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-Marcellus{
font-family: 'Marcellus', serif;
}
@font-face {
font-family: 'Marcellus';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/Marcellus/Marcellus-Regular.woff2") format("woff2"),
url("../fonts/Marcellus/Marcellus-Regular.woff") format("woff");
}
Fetteegyptienne_regular - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-Fetteegyptienne_regulars{
font-family: 'Fetteegyptienne_regular', sans-serif;
}
@font-face {
font-family: 'Fetteegyptienne_regular';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/fetteegyptienne_regular/Fetteegyptienne_regular.woff2") format("woff2"),
url("../fonts/shippori_mincho/Fetteegyptienne_regular.woff") format("woff");
}
Jost - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-Jost{
font-family: 'Jost', sans-serif;
}
@font-face {
font-family: 'Jost';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/Jost/Jost-Medium.woff2") format("woff2"),
url("../fonts/Jost/Jost-Medium.woff") format("woff");
}
@font-face {
font-family: 'Jost';
font-weight: 500;
font-style: italic;
font-display: swap;
src: url("../fonts/Jost/Jost-MediumItalic.woff2") format("woff2"),
url("../fonts/Jost/Jost-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Jost';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/Jost/Jost-Bold.woff2") format("woff2"),
url("../fonts/Jost/Jost-Bold.woff") format("woff");
}
@font-face {
font-family: 'Jost';
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("../fonts/Jost/Jost-BoldItalic.woff2") format("woff2"),
url("../fonts/Jost/Jost-BoldItalic.woff") format("woff");
}
Cinzel - This is font for English
People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go.
03-1234-5678
.font-Cinzel{
font-family: 'Cinzel', serif;
}
@font-face {
font-family: 'Cinzel';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/Cinzel/Cinzel-Regular.woff2") format("woff2"),
url("../fonts/Cinzel/Cinzel-Regular.woff") format("woff");
}
@font-face {
font-family: 'Cinzel';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/Cinzel/Cinzel-Medium.woff2") format("woff2"),
url("../fonts/Cinzel/Cinzel-Medium.woff") format("woff");
}
@font-face {
font-family: 'Cinzel';
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("../fonts/Cinzel/Cinzel-SemiBold.woff2") format("woff2"),
url("../fonts/Cinzel/Cinzel-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Cinzel';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("../fonts/Cinzel/Cinzel-Bold.woff2") format("woff2"),
url("../fonts/Cinzel/Cinzel-Bold.woff") format("woff");
}
Buttons
.button-wrap {
display: inline-block;
border-bottom: 1px solid #ccc;
padding: 2rem;
}
.circle-btn {
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
}
.circle-btn .circle-ico {
position: relative;
margin-left: 40px;
}
.circle-ico .circle-box {
display: block;
width: 49px;
height: 49px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #233B68;
transition: all 0.5s;
}
.circle-ico .circle-arrow {
position: absolute;
display: block;
top: 37%;
left: -37%;
}
a.blue-btn {
text-decoration: none;
color: #233b68;
transition: all 0.5s;
}
a.blue-btn:hover{
text-decoration: none;
opacity: 0.6;
}
.circle-btn:hover .circle-ico .circle-box {
transform: scale(1.4);
background-color: #E9F0FF;
}
CheckBox
/******** Form Styles ********/
.form-row {
display: flex;
column-gap: 22px;
row-gap: 16px;
margin-top: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.form-group {
display: inline-block;
}
/******** END Form Styles ********/
/******** Checkbox Styles ********/
#oc-form-elements .oc-checkbox input[type="checkbox"] {
visibility: hidden;
position: absolute
}
#oc-form-elements .oc-checkbox input[type="checkbox"]+.box {
margin-right: 8px;
position: relative;
width: 20px;
height: 20px;
display: block;
border: 1px solid #90A4AE
}
#oc-form-elements .oc-checkbox input[type="checkbox"]+.box:after {
content: "";
transform: scale(0);
transition: all 0.25s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-position: 50% 50%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MC4zICgzMzgzOSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+Y2hlY2ttYXJrPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IklDT04iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJjaGVja21hcmsiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iQ2hlY2ttYXJrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMS4wMDAwMDAsIDIyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03MS4yOTY3MDAxLDEuMzM2Njg5NzQgTDIyLjgzNTE2MTYsNTAuNTI1ODc4OSBMMjguMjQxNzYxNCw1MC41MjU4Nzg5IEw2LjcwMzI5OTkxLDI4LjY2NDAxNzEgQzUuMjMyMzk0MjYsMjcuMTcxMDI1OCAyLjgyOTY4MTA1LDI3LjE1MzEyMTggMS4zMzY2ODk3NCwyOC42MjQwMjc0IEMtMC4xNTYzMDE1NzUsMzAuMDk0OTMzMSAtMC4xNzQyMDU1NDksMzIuNDk3NjQ2MyAxLjI5NjcwMDA5LDMzLjk5MDYzNzYgTDIyLjgzNTE2MTYsNTUuODUyNDk5NSBDMjQuMzIxNTkxNiw1Ny4zNjEyNDgyIDI2Ljc1NTMzMTUsNTcuMzYxMjQ4MiAyOC4yNDE3NjE0LDU1Ljg1MjQ5OTUgTDc2LjcwMzI5OTksNi42NjMzMTAyNiBDNzguMTc0MjA1NSw1LjE3MDMxODk1IDc4LjE1NjMwMTYsMi43Njc2MDU3NCA3Ni42NjMzMTAzLDEuMjk2NzAwMDkgQzc1LjE3MDMxOSwtMC4xNzQyMDU1NDkgNzIuNzY3NjA1NywtMC4xNTYzMDE1NzUgNzEuMjk2NzAwMSwxLjMzNjY4OTc0IEw3MS4yOTY3MDAxLDEuMzM2Njg5NzQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
}
#oc-form-elements .oc-checkbox input[type="checkbox"]:checked+.box {
border: 1px solid #78909C;
background-color: #78909C
}
#oc-form-elements .oc-checkbox input[type="checkbox"]:checked+.box:after {
transform: scale(1)
}
#oc-form-elements .oc-select-button {
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
padding: 8px;
display: flex;
align-items: center;
height: 100%;
box-sizing: border-box;
margin: 0;
word-break: break-all;
cursor: pointer;
}
/******** END Checkbox Styles ********/