Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webフォントことはじめ。Getting started with web fonts.

Avatar for Takafumi Omuro Takafumi Omuro
July 26, 2018
Technology
0
110

Webフォントことはじめ。Getting started with web fonts.

Avatar for Takafumi Omuro

Takafumi Omuro

July 26, 2018
Tweet

More Decks by Takafumi Omuro

See All by Takafumi Omuro
生成AIで生産性向上
Avatar for Takafumi Omuro tomuro
0
430
Cloudflare Workers の実行時間が遅くなることがある
Avatar for Takafumi Omuro tomuro
0
13
生成AI使ってますか？
〜Amazon Bedrockで試してみよう〜
Avatar for Takafumi Omuro tomuro
2
300
Morisawa Fonts 新プランでのStripe導入事例
Avatar for Takafumi Omuro tomuro
0
120
Cloudflareを活用したWebフォントサービスの概要
Avatar for Takafumi Omuro tomuro
0
250
Stripeでサブスクリプションに割引を適用したときの注意点
Avatar for Takafumi Omuro tomuro
0
330
クラウドを利用したサブスクリプションサービスに向けて内製化開発に切り替えた話
Avatar for Takafumi Omuro tomuro
2
550
SESからSendGridに変更したけど移行で問題が出た話
Avatar for Takafumi Omuro tomuro
1
2.1k
なぜ老舗企業がOktaでDXを実現できたのか？
Avatar for Takafumi Omuro tomuro
1
580

Other Decks in Technology

See All in Technology
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
Avatar for Lamoda Tech lamodatech
0
300
Oracle Audit Vault and Database Firewall 20 概要
Avatar for oracle4engineer oracle4engineer
PRO
3
1.6k
PHPでWebブラウザのレンダリングエンジンを実装する
Avatar for ディップ株式会社 dip_tech
PRO
0
180
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
Avatar for K.Osawa kkuv
1
240
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
Avatar for opelab opelab
9
2.2k
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
Avatar for Saito Ayumu d120145
0
230
原則から考える保守しやすいComposable関数設計
Avatar for Mori Atsushi moriatsushi
3
510
生成AIでwebアプリケーションを作ってみた
Avatar for tajimon tajimon
2
130
AIエージェント最前線！ Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
Avatar for みのるん minorun365
PRO
11
4.2k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
Avatar for shogogg shogogg
2
420
PostgreSQL 18 cancel request key長の変更とRailsへの関連
Avatar for Yasuo Honda yahonda
0
110
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
Avatar for Masatoshi Shimada smdmts
5
570

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k

Transcript

  1. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ͜ͱ͸͡Ί .JY-FBQ4UVEZ גࣜձࣾϞϦαϫখࣨو࢙

  2. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࣗݾ঺հ w ໊લɿখࣨو࢙ʢΦϜϩλΧϑϛʣɹɹɹ w ॴଐɿגࣜձࣾϞϦαϫ
 ɹɹɹΤϯλϓϥΠζࣄۀ෦։ൃ෦
 ɹɹɹΫϥ΢υϑΥϯτγεςϜ՝ w झຯɿόΠΫʢ:;'3ॴ༗ʣ


    ɹɹɹ57ήʔϜʢϞϯϋϯɺεϓϥτΡʔϯʣ w ޷͖ͳॻମɿϑΥʔΫ

  3. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ΞδΣϯμ w 8FCϑΥϯτͱ͸ʁ w 8FCϑΥϯτͷ࢖͍ํ w ϑΥϯτඳըλΠϜϥΠϯ w ೔ຊޠϑΥϯτͷ໰୊

    w 8FCϑΥϯτ࠷దԽ

  4. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࠓ೔ͷΰʔϧ w ΰʔϧ w 8FCϑΥϯτΛ࢖͑ΔΑ͏ʹͳΔ͜ͱ w ϑΥʔΫΛݟ෼͚ΕΔΑ͏ʹͳΔ͜ͱ w ࿩͢͜ͱ

    w 8FCϑΥϯτͷ࢖͍ํʹ͍ͭͯ w ࿩͞ͳ͍͜ͱ w 8FCϑΥϯτબఆͳͲͷσβΠϯʹ͍ͭͯ

  5. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱ͸ʁ w ϝϦοτ w ࣗ༝౓ͷߴ͍8FCσβΠϯ w ΞΫηεϏϦςΟͷ޲্
 w σϝϦοτ

    w ϑΥϯτϑΝΠϧͷμ΢ϯϩʔυʹґΔ஗Ԇදࣔ w ೔ຊޠͳͲจࣈछͷଟ͍ϑΥϯτͰ͸༰ྔ͕େ͖͍

  6. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱ͸ʁ IUUQTXXXPODIPTIPLVKQ

  7. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱ͸ʁ IUUQTXXXDJUZTIJCVZBUPLZPKQ

  8. $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Ͱࢦఆͨ͠ϑΥϯτ໊

  9. $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͸ϑΥʔϧόοΫͰ͖·͢ ˢϨΨγʔϒϥ΢β޲͚ʹ ɹෳ਺ॻ͍ͨΓͰ͖·͢

  10. $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΋ϑΥʔϧόοΫͰ͖·͢

  11. $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", "͔ͳ", "׽ࣈ"; } ˣӳޠɺ͔ͳɺ׽ࣈͷॻମΛ੾Γସ͑Δ͜ͱ΋Ͱ͖·͢

  12. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap

    period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ UJNF

  13. $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 
 จࣈ͕දࣔ͞Εͳ͍

  14. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ ϑΥϯτμ΢ϯϩʔυ׬ྃ

  15. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap

    period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ '065 'MBTIPG6OTUZMFE5FYU 
 จࣈͷνϥ͖ͭൃੜ

  16. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ ͜͜·Ͱʹμ΢ϯϩʔυ Ͱ͖ͳ͍ͱதஅ͞ΕΔ

  17. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ $ISPNF 'JSFGPYT

  18. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ *& &EHFT

  19. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ 4BGBSJʿ

  20. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ೔ຊޠϑΥϯτͷ໰୊ w ༰ྔ͕େ͖͍
 
 ྫ͑͹ɺ(PPHMFͷ/PUP4BOT$+,Λར༻͢Δ৔߹ʜ ༻్ ϑΝΠϧ໊ ༰ྔ ݟग़͠

    /PUP4BOT$+,KQ#PMEPUG .# Ϧʔυ /PUP4BOT$+,KQ.FEJVNPUG .# ຊจ /PUP4BOT$+,KQ3FHVMBSPUG .#

  21. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ೔ຊޠϑΥϯτͷ໰୊ w άϦϑʢࣈܗʣ͕ෳࡶ
 
 ෳࡶͳάϦϑΛখαΠζͰදࣔ͢Δͱʜ ਌ᳵ ɾQU ɾQU ਌ᳵ

  22. $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

  23. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτ
 
 ೔ຊޠͰΑ͘࢖͏จࣈ͚ͩͷϑΥϯτʹͨ͠৔߹
 ˞+*49ୈҰਫ४׽ࣈɺه߸ɺجຊϥςϯจࣈɺ͔ͳɺΧφ ࢀߟࢿྉʣ5BLBOPSJ0LJ ΠψͰ΋Θ͔Δ΢ΣϒϑΥϯτ 

    1ද ϑΝΠϧ໊ ࠷దԽલ ࠷దԽޙ 80'' ࠷దԽޙ 80'' /PUP4BOT$+,KQ#PMEPUG .# ,# ,# /PUP4BOT$+,KQ.FEJVNPUG .# ,# ,# /PUP4BOT$+,KQ3FHVMBSPUG .# ,# ,#

  24. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w "QQMFͷ8FCαΠτͷ৔߹
 
 จࣈఔ౓ʴXP⒎ѹॖ IUUQTXXXBQQMFDPNKQ ϑΝΠϧ໊ ༰ྔ 4'1SP+1@SFHVMBSXP⒎

    ,# 4'1SP+1@TFNJCPMEXP⒎ ,#

  25. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w ࠷దԽ͸݁ߏΊΜͲ͍͘͞Ͱ͢ΑͶʜ

  26. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w 8FCϑΥϯταʔϏεΛ࢖͏ʂ IUUQTUZQFTRVBSFDPN

  27. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτͱϑΥʔϚοτม׵͕ࣗಈͰߦΘΕ·͢ʂ
 '065ʢνϥπΩʣ΋σϑΥϧτઃఆͰ཈੍ʂ IUUQTUZQFTRVBSFDPN

  28. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࢀߟࢿྉ w ΠψͰ΋Θ͔Δ΢ΣϒϑΥϯτʢബ͍ຊʣ
 ˣ঎ۀ൛ͰϦχϡʔΞϧ
 ΢ΣϒϑΥϯτ࣮ફϚχϡΞϧେ໦ଚلʢஶʣ
 IUUQTXXXBNB[PODPKQEQ IUUQTESBGUTDTTXHPSHDTTGPOUT IUUQTUZQFTRVBSFDPN w

    $44'POUT.PEVMF-FWFM
 w 5ZQF4RVBSF