Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webフォントことはじめ。Getting started with web fonts.
Search
Takafumi Omuro
July 26, 2018
Technology
0
96
Webフォントことはじめ。Getting started with web fonts.
Takafumi Omuro
July 26, 2018
Tweet
Share
More Decks by Takafumi Omuro
See All by Takafumi Omuro
Cloudflare Workers の実行時間が遅くなることがある
tomuro
0
6
生成AI使ってますか? 〜Amazon Bedrockで試してみよう〜
tomuro
2
230
Morisawa Fonts 新プランでのStripe導入事例
tomuro
0
99
Cloudflareを活用したWebフォントサービスの概要
tomuro
0
220
Stripeでサブスクリプションに割引を適用したときの注意点
tomuro
0
290
クラウドを利用したサブスクリプションサービスに向けて内製化開発に切り替えた話
tomuro
2
320
SESからSendGridに変更したけど移行で問題が出た話
tomuro
1
1.9k
なぜ老舗企業がOktaでDXを実現できたのか?
tomuro
1
540
Serverless で運用を楽にしたい
tomuro
0
590
Other Decks in Technology
See All in Technology
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
290
分解して理解する Aspire
nenonaninu
2
1.1k
AIエージェント元年@日本生成AIユーザ会
shukob
1
210
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
250
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Active Directory攻防
cryptopeg
PRO
8
5.5k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building Adaptive Systems
keathley
40
2.4k
Producing Creativity
orderedlist
PRO
344
40k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Transcript
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ͜ͱ͡Ί .JY-FBQ4UVEZ גࣜձࣾϞϦαϫখࣨو࢙
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࣗݾհ w ໊લɿখࣨو࢙ʢΦϜϩλΧϑϛʣɹɹɹ w ॴଐɿגࣜձࣾϞϦαϫ ɹɹɹΤϯλϓϥΠζࣄۀ෦։ൃ෦ ɹɹɹΫϥυϑΥϯτγεςϜ՝ w झຯɿόΠΫʢ:;'3ॴ༗ʣ
ɹɹɹ57ήʔϜʢϞϯϋϯɺεϓϥτΡʔϯʣ w ͖ͳॻମɿϑΥʔΫ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ΞδΣϯμ w 8FCϑΥϯτͱʁ w 8FCϑΥϯτͷ͍ํ w ϑΥϯτඳըλΠϜϥΠϯ w ຊޠϑΥϯτͷ
w 8FCϑΥϯτ࠷దԽ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࠓͷΰʔϧ w ΰʔϧ w 8FCϑΥϯτΛ͑ΔΑ͏ʹͳΔ͜ͱ w ϑΥʔΫΛݟ͚ΕΔΑ͏ʹͳΔ͜ͱ w ͢͜ͱ
w 8FCϑΥϯτͷ͍ํʹ͍ͭͯ w ͞ͳ͍͜ͱ w 8FCϑΥϯτબఆͳͲͷσβΠϯʹ͍ͭͯ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱʁ w ϝϦοτ w ࣗ༝ͷߴ͍8FCσβΠϯ w ΞΫηεϏϦςΟͷ্ w σϝϦοτ
w ϑΥϯτϑΝΠϧͷμϯϩʔυʹґΔԆදࣔ w ຊޠͳͲจࣈछͷଟ͍ϑΥϯτͰ༰ྔ͕େ͖͍
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱʁ IUUQTXXXPODIPTIPLVKQ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱʁ IUUQTXXXDJUZTIJCVZBUPLZPKQ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff");
} w $44AGPOUGBNJMZA body { font-family: "MyFont"; } ˡϑΥϯτ໊ʢԿͰ͍͍ʣ ˡϑΥϯτͷॴ ˡ!GPOUGBDFͰࢦఆͨ͠ϑΥϯτ໊
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff")
format("woff"), url("fonts/MyFont.ttf") format(“ttf"); } w $44AGPOUGBNJMZA body { font-family: "MyFont"; } ˣTSDϑΥʔϧόοΫͰ͖·͢ ˢϨΨγʔϒϥβ͚ʹ ɹෳॻ͍ͨΓͰ͖·͢
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff")
format("woff"), url(“fonts/MyFont.ttf") format(“ttf"); } w $44AGPOUGBNJMZA body { font-family: "MyFont", serif; } ˣGPOUGBNJMZϑΥʔϧόοΫͰ͖·͢
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff")
format("woff2"), url(“fonts/MyFont.ttf") format(“ttf"); } w $44AGPOUGBNJMZA body { font-family: "ascii", "͔ͳ", "ࣈ"; } ˣӳޠɺ͔ͳɺࣈͷॻମΛΓସ͑Δ͜ͱͰ͖·͢
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap
period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ UJNF
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap
period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ '0*5 'MBTIPG*OWJTJCMF5FYU จࣈ͕දࣔ͞Εͳ͍
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period
swap period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ ϑΥϯτμϯϩʔυྃ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap
period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ '065 'MBTIPG6OTUZMFE5FYU จࣈͷνϥ͖ͭൃੜ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period
swap period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ ͜͜·Ͱʹμϯϩʔυ Ͱ͖ͳ͍ͱதஅ͞ΕΔ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period
swap period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ $ISPNF 'JSFGPYT
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period
swap period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ *& &EHFT
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period
swap period font failure period ݟ͑ͳ͍จࣈͰ ϨϯμϦϯά ସϑΥϯτͰ ϨϯμϦϯά ϑΥϯτऔಘதஅ 4BGBSJʿ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ຊޠϑΥϯτͷ w ༰ྔ͕େ͖͍ ྫ͑ɺ(PPHMFͷ/PUP4BOT$+,Λར༻͢Δ߹ʜ ༻్ ϑΝΠϧ໊ ༰ྔ ݟग़͠
/PUP4BOT$+,KQ#PMEPUG .# Ϧʔυ /PUP4BOT$+,KQ.FEJVNPUG .# ຊจ /PUP4BOT$+,KQ3FHVMBSPUG .#
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ຊޠϑΥϯτͷ w άϦϑʢࣈܗʣ͕ෳࡶ ෳࡶͳάϦϑΛখαΠζͰදࣔ͢Δͱʜ ᳵ ɾQU ɾQU ᳵ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w 8FCϑΥϯτϑΥʔϚοτ format ໊শ આ໌ ิ UUG 5SVF5ZQF'POU
5SVF5ZQFΞτϥΠϯ (FOFSBM PUG 0QFO5ZQF'POU $''ΞτϥΠϯ (FOFSBM XP⒎ 8FC0QFO'POU'PSNBU 8FCϑΥϯτ༻ͷѹॖϑΥϯτ 8FC XP⒎ 8FC0QFO'POU'PSNBU XP⒎ͷѹॖΞϧΰϦζϜվળ൛ 8FC FPU &NCFEEFE0QFO5ZQF *&͚ͷ.4ಠ༷ࣗ -FHBDZ TWH 4DBMBCMF7FDUPS(SBQIJDT 47(ܗࣜͷϑΥϯτ -FHBDZ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτ ຊޠͰΑ͘͏จࣈ͚ͩͷϑΥϯτʹͨ͠߹ ˞+*49ୈҰਫ४ࣈɺه߸ɺجຊϥςϯจࣈɺ͔ͳɺΧφ ࢀߟࢿྉʣ5BLBOPSJ0LJ ΠψͰΘ͔ΔΣϒϑΥϯτ
1ද ϑΝΠϧ໊ ࠷దԽલ ࠷దԽޙ 80'' ࠷దԽޙ 80'' /PUP4BOT$+,KQ#PMEPUG .# ,# ,# /PUP4BOT$+,KQ.FEJVNPUG .# ,# ,# /PUP4BOT$+,KQ3FHVMBSPUG .# ,# ,#
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w "QQMFͷ8FCαΠτͷ߹ จࣈఔʴXP⒎ѹॖ IUUQTXXXBQQMFDPNKQ ϑΝΠϧ໊ ༰ྔ 4'1SP+1@SFHVMBSXP⒎
,# 4'1SP+1@TFNJCPMEXP⒎ ,#
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w ࠷దԽ݁ߏΊΜͲ͍͘͞Ͱ͢ΑͶʜ
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w 8FCϑΥϯταʔϏεΛ͏ʂ IUUQTUZQFTRVBSFDPN
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτͱϑΥʔϚοτม͕ࣗಈͰߦΘΕ·͢ʂ '065ʢνϥπΩʣσϑΥϧτઃఆͰ੍ʂ IUUQTUZQFTRVBSFDPN
$PQZSJHIU.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࢀߟࢿྉ w ΠψͰΘ͔ΔΣϒϑΥϯτʢബ͍ຊʣ ˣۀ൛ͰϦχϡʔΞϧ ΣϒϑΥϯτ࣮ફϚχϡΞϧେଚلʢஶʣ IUUQTXXXBNB[PODPKQEQ IUUQTESBGUTDTTXHPSHDTTGPOUT IUUQTUZQFTRVBSFDPN w
$44'POUT.PEVMF-FWFM w 5ZQF4RVBSF